如何解决有没有办法在HashRouter和react-router v4中使用历史记录?
我需要将用户重定向到React组件之外,这通常是将history
与react-router一起使用。
// history.js
const history = createBrowserHistory();
export default history;
// App,setting up router
import { HashRouter as Router } from 'react-router-dom';
import history from './history';
...
<HashRouter history={history}>...</HashRouter> // problem
// Non-component file
import history from './history';
history.push('/target');
由于HashRouter
不使用历史记录道具,而是在内部处理历史记录,并且开发人员被指示使用withRouter
以便将history
暴露给组件,因此这并不明显如何在组件外部进行重定向。
我正在使用HashRouter
,我需要在组件外部使用history
(这意味着我不能使用withRouter
)。
我该如何实现?
解决方法
是的,有一种方法可以同时使用history
和基于哈希的路由器。
创建历史记录实例时,使用createHashHistory
代替createBrowserHistory
。
// myCreatedHistory.js
import { createHashHistory } from 'history';
export default createHashHistory();
代替使用HashRouter
,而是使用较低级别的Router
,并将history
道具传递给它,就像这样。
// App
import { Router } from 'react-router-dom';
import history from '../myCreatedHistory';
...
<Router basename="/" history={history}>...</Router>
然后,您可以从任何地方(例如减速器)导入history
。
// Reducer,or anywhere
import history from '../myCreatedHistory';
history.push('/target');
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。