如果你正在使用react-router v6，当你想要返回到前一页时，你可以使用Link:

第一步:你需要从react-router-dom中导入Link

import { Link } from 'react-router-dom';

第二步:像这样用Link包裹按钮。它工作得很完美。

<Link to='..'>
  <Button type='button'>Go Back</Button>
</Link>

如果你正在使用react-router v6，当你想要返回到前一页时，你可以使用Link:

第一步:你需要从react-router-dom中导入Link

import { Link } from 'react-router-dom';

第二步:像这样用Link包裹按钮。它工作得很完美。

<Link to='..'>
  <Button type='button'>Go Back</Button>
</Link>

React路由器使用HTML5 History API，它建立在浏览器历史API的基础上，提供了一个我们可以在React应用程序中轻松使用的接口。历史API。所以不需要导入任何东西(useHistory等)

对于功能组件:

<button onClick={()=>{ window.history.back() }}> Back </button>

对于类组件:

<button onClick={()=>{ this.window.history.back() }}> Back </button>

ES6方法无mixins使用react-router，无状态函数。

import React from 'react'
import { browserHistory } from 'react-router'

export const Test = () => (
  <div className="">
    <button onClick={browserHistory.goBack}>Back</button>
  </div>
)

在react-router-dom v6上

import { useNavigate } from 'react-router-dom';

function goBack() {
  const navigate = useNavigate();

  return <button onClick={() => navigate(-1)}>go back</button>
}

回来的

你也可以使用react-router-redux，它有goBack()和push()。

下面是一个样本包:

在你的应用程序的入口点，你需要ConnectedRouter，有时需要连接的一个棘手的连接是history对象。Redux中间件监听历史更改:

import React from 'react'
import { render } from 'react-dom'
import { ApolloProvider } from 'react-apollo'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'
import client from './components/apolloClient'
import store, { history } from './store'
import Routes from './Routes'
import './index.css'

render(
  <ApolloProvider client={client}>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Routes />
      </ConnectedRouter>
    </Provider>
  </ApolloProvider>,
  document.getElementById('root'),
)

我会告诉你一个连接历史的方法。注意历史记录是如何导入到商店的，也可以作为一个单例导出，这样它就可以在应用程序的入口点使用:

import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './reducers'

export const history = createHistory()

const initialState = {}
const enhancers = []
const middleware = [thunk, routerMiddleware(history)]

if (process.env.NODE_ENV === 'development') {
  const { devToolsExtension } = window
  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension())
  }
}

const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers)
const store = createStore(rootReducer, initialState, composedEnhancers)

export default store

上面的示例块展示了如何加载react-router-redux中间件帮助程序来完成设置过程。

我认为接下来的部分完全是额外的，但我将包括它，以防将来有人发现好处:

import { combineReducers } from 'redux'
import { routerReducer as routing } from 'react-router-redux'

export default combineReducers({
  routing, form,
})

我一直在使用routerReducer，因为它允许我强制重载组件，而通常情况下由于shouldComponentUpdate而无法重载组件。一个明显的例子是当你有一个导航栏，当用户按下导航链接按钮时，它应该更新。如果您沿着这条路走下去，您将了解到Redux的连接方法使用shouldComponentUpdate。使用routerReducer，你可以使用mapStateToProps将路由更改映射到导航栏中，这将在历史对象更改时触发它更新。

是这样的:

const mapStateToProps = ({ routing }) => ({ routing })

export default connect(mapStateToProps)(Nav)

请原谅我为人们添加了一些额外的关键字:如果您的组件没有正确更新，请通过删除连接函数来调查shouldComponentUpdate，看看它是否修复了问题。如果是这样，拉入routerReducer，当URL改变时，组件就会正确更新。

最后，在完成所有这些之后，您可以随时调用goBack()或push() !

现在尝试一些随机的组件:

在connect()中导入 你甚至不需要mapStateToProps或者mapDispatchToProps 从react-router-redux导入goBack和push 调用this.props.dispatch(返回()) 调用this.props.dispatch (push(' /三明治')) 体验积极情绪

如果你需要更多的样本，请访问:https://www.npmjs.com/package/react-router-redux