我在从 React-Router v3 迁移到 v4 时遇到了一些小问题。在 v3 中，我可以在任何地方执行此操作：
import { browserHistory } from 'react-router';
browserHistory.push('/some/path');
我如何在 v4 中实现这一点。
我知道withRouter当您在组件中时，我可以使用 hoc 、react上下文或事件路由器props。但对我来说不是这样。
我正在寻找v4中NavigatingOutsideOfComponents的等效项
您只需要有一个导出history对象的module。然后，您将在整个项目中导入该对象。
// history.js
import { createBrowserHistory } from 'history'
export default createBrowserHistory({
/* pass a configuration object here if needed */
})
然后，您将使用该<Router>组件，而不是使用其中一个内置路由器。
// index.js
import { Router } from 'react-router-dom'
import history from './history'
import App from './App'
ReactDOM.render((
<Router history={history}>
<App />
</Router>
), holder)
// some-other-file.js
import history from './history'
history.push('/go-here')
这有效！ https://reacttraining.com/react-router/web/api/withRouter
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
render () {
this.props.history;
}
}
withRouter(MyComponent);
如果您只需要历史对象才能导航到其他组件，则基于此答案：
import { useHistory } from "react-router-dom";
function HomeButton() {
const history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}
与接受的答案类似，您可以使用react和react-router它本身为您提供history可以在文件中确定范围然后导出的对象。
历史.js
import React from 'react';
import { withRouter } from 'react-router';
// variable which will point to react-router history
let globalHistory = null;
// component which we will mount on top of the app
class Spy extends React.Component {
constructor(props) {
super(props)
globalHistory = props.history;
}
componentDidUpdate() {
globalHistory = this.props.history;
}
render(){
return null;
}
}
export const GlobalHistory = withRouter(Spy);
// export react-router history
export default function getHistory() {
return globalHistory;
}
然后导入 Component 并挂载以初始化历史变量：
import { BrowserRouter } from 'react-router-dom';
import { GlobalHistory } from './history';
function render() {
ReactDOM.render(
<BrowserRouter>
<div>
<GlobalHistory />
//.....
</div>
</BrowserRouter>
document.getElementById('app'),
);
}
然后您可以在安装后导入您的应用程序：
import getHistory from './history';
export const goToPage = () => (dispatch) => {
dispatch({ type: GO_TO_SUCCESS_PAGE });
getHistory().push('/success'); // at this point component probably has been mounted and we can safely get `history`
};
我什至制作了npm 包来做到这一点。
如果您使用的是 redux 和 redux-thunk，最好的解决方案是使用react-router-redux
// then, in redux actions for example
import { push } from 'react-router-redux'
dispatch(push('/some/path'))
查看文档以进行一些配置很重要。