我有一个使用 redux 和 React-router 的通用 React 应用程序。
我有以下几条路线：
/2016
/2015
/2014
/2013
etc.
每条路线都需要来自 API 的数据。目前，我有<Link>导航组件中的元素调度异步操作onClick，它使用来自该路线的 API 的数据填充商店。
对于 MVP，我只是覆盖post: {}当路线发生变化时，商店中的内容会包含新的帖子内容，这样我们就可以获得 API 上的任何新内容。
我意识到让行动调度员<Link>按钮并不是最佳选择，因为点击后退按钮不会重新触发操作调度来获取上一路线的内容。
有没有办法让 React Router 在路由发生变化时触发调度操作？ （限制它监听一组特定的路由将是一个额外的好处）。
我意识到我应该从商店获取历史记录，但现在，通过触发操作调度来再次访问 API 会更容易为了获得新的内容.
Cheers.
“生命周期”挂钩onEnter and onChange已在 React-router 4 中删除，这使得这个问题的大多数其他答案都过时了。
虽然我建议您使用您的组件生命周期方法为了实现你的目标，这里是你的问题的答案，适用于 React-router 4。
今天有效的方法是使用以下命令来监听历史变化历史图书馆由 React 路由器的开发人员自己创建并从那里调度异步操作。
// history.js
import createHistory from "history/createBrowserHistory"
const history = createHistory()
// Get the current location.
const location = history.location
// Listen for changes to the current location.
const unlisten = history.listen((location, action) => {
//Do your logic here and dispatch if needed
})
export default history
然后将历史记录导入您的应用程序中
// App.js
import { Router, Route } from 'react-router-dom';
import Home from './components/Home';
import Login from './components/Login';
import history from './history';
class App extends Component {
render() {
return (
<Router history={history}>
<div>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
</div>
</Router>
)
}
}
Source: 历史图书馆
React 路由器文档
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
