您可以在
history组件外部使用这些方法。通过以下方式尝试。
首先,
history使用历史记录包创建一个对象:
// src/history.jsimport { createBrowserHistory } from 'history';export default createBrowserHistory();
然后将其包装
<Router>( 请注意 ,您应该使用
import { Router }而不是
import { BrowserRouteras Router }):
// src/index.jsx// ...import { Router, Route, link } from 'react-router-dom';import history from './history';ReactDOM.render( <Provider store={store}> <Router history={history}> <div> <ul> <li><link to="/">Home</link></li> <li><link to="/login">Login</link></li> </ul> <Route exact path="/" component={HomePage} /> <Route path="/login" component={LoginPage} /> </div> </Router> </Provider>, document.getElementById('root'),);
从任何地方更改当前位置,例如:
// src/actions/userActionCreators.js// ...import history from '../history';export function login(credentials) { return function (dispatch) { return loginRemotely(credentials) .then((response) => { // ... history.push('/'); }); };}
UPD :您还可以在React Router FAQ中看到一个稍微不同的示例。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)