如何在反应路由器 v4上获得历史记录？

You just need to have a module that exports a history object. Then you would import that object throughout your project.

// 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')

In the specific case of react-router, using context is a valid case scenario, e.g.

class MyComponent extends React.Component {
props: PropsType;


static contextTypes = {
router: PropTypes.object
};


render () {
this.context.router;
}
}

您可以通过路由器上下文访问历史记录的实例，例如 this.context.router.history。

成功了！ 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);

如果您正在使用 redux 和 redux-thunk，那么最好的解决方案将是使用 反应-路由器-还原

// then, in redux actions for example
import { push } from 'react-router-redux'


dispatch(push('/some/path'))

看到文档进行一些配置是很重要的。

与接受回答类似的是，您可以使用 react和 react-router本身来提供您 history对象，您可以在一个文件范围，然后导出。

V 史

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 package做到了这一点。

基于 这个答案，如果只需要历史对象就可以导航到其他组件:

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>
);
}

在 App.js 中

 import {useHistory } from "react-router-dom";


const TheContext = React.createContext(null);


const App = () => {
const history = useHistory();


<TheContext.Provider value=\{\{ history, user }}>


<Switch>
<Route exact path="/" render={(props) => <Home {...props} />} />
<Route
exact
path="/sign-up"
render={(props) => <SignUp {...props} setUser={setUser} />}
/> ...

然后在子组件中:

const Welcome = () => {
    

const {user, history} = React.useContext(TheContext);
....