在“生命周期”钩onEnter
和onChange
在已被删除阵营路由器4,这使得大多数其他的答案对这个问题过时出。
虽然我建议您使用组件生命周期方法来实现您的目标,但这里是您的问题的答案,它适用于 React-router 4。
今天的工作是使用由 React 路由器开发人员自己创建的History 库来监听历史变化,并从那里分派异步操作。
// 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>
)
}
}
来源:历史库
React 路由器文档