如何在React Router v4中推送到历史记录?

如何在React Router v4中推送到历史记录?,第1张

如何在React Router v4中推送到历史记录?

您可以在

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中看到一个稍微不同的示例



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/4928923.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-12
下一篇 2022-11-12

发表评论

登录后才能评论

评论列表(0条)

保存