React Router v6 - React 17+ (updated 01/14/2022)

import React, {useCallback} from 'react';
import {useNavigate} from 'react-router-dom';

export default function StackOverflowExample() {
  const navigate = useNavigate();
  const handleOnClick = useCallback(() => navigate('/sample', {replace: true}), [navigate]);

  return (
    <button type="button" onClick={handleOnClick}>
      Go home
    </button>
  );
}

注意:对于这个答案，v6和v5之间的一个主要变化是useNavigate，现在是首选的react 挂钩.useHistory已弃用，不推荐使用.

React Router v5 - React 16.8+ with Hooks

如果你利用React Hooks，你可以利用来自React Router v5的useHistory API.

import React, {useCallback} from 'react';
import {useHistory} from 'react-router-dom';

export default function StackOverflowExample() {
  const history = useHistory();
  const handleOnClick = useCallback(() => history.push('/sample'), [history]);

  return (
    <button type="button" onClick={handleOnClick}>
      Go home
    </button>
  );
}

如果不想使用useCallback，另一种编写单击处理程序的方法

const handleOnClick = () => history.push('/sample');

React Router v4 - Redirect Component

v4推荐的方法是允许渲染方法捕获重定向.使用状态或props 来确定是否需要显示重定向组件(然后触发重定向).

import { Redirect } from 'react-router';

// ... your class implementation

handleOnClick = () => {
  // some action...
  // then redirect
  this.setState({redirect: true});
}

render() {
  if (this.state.redirect) {
    return <Redirect push to="/sample" />;
  }

  return <button onClick={this.handleOnClick} type="button">Button</button>;
}

参考:https://reacttraining.com/react-router/web/api/Redirect

React Router v4 - Reference Router Context

您还可以利用React组件公开的Router的上下文.

static contextTypes = {
  router: PropTypes.shape({
    history: PropTypes.shape({
      push: PropTypes.func.isRequired,
      replace: PropTypes.func.isRequired
    }).isRequired,
    staticContext: PropTypes.object
  }).isRequired
};

handleOnClick = () => {
  this.context.router.push('/sample');
}

这就是<Redirect />在引擎盖下的工作原理.

参考:https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Redirect.js#L46,L60

React Router v4 - Externally Mutate History Object

如果仍然需要执行类似于v2实现的操作，可以创建BrowserRouter的副本，然后将history作为可导出常量公开.下面是一个基本的例子，但如果需要的话，你可以用定制的props 组合它.在生命周期方面有一些值得注意的注意事项，但它应该总是重新启动路由，就像在v2中一样.这对于操作函数发出API请求后的重定向非常有用.

// browser router file...
import createHistory from 'history/createBrowserHistory';
import { Router } from 'react-router';

export const history = createHistory();

export default class BrowserRouter extends Component {
  render() {
    return <Router history={history} children={this.props.children} />
  }
}

// your main file...
import BrowserRouter from './relative/path/to/BrowserRouter';
import { render } from 'react-dom';

render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>
);

// some file... where you don't have React instance references
import { history } from './relative/path/to/BrowserRouter';

history.push('/sample');

最新BrowserRouter延长:https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js

React Router v2

将新状态推送到browserHistory实例:

import {browserHistory} from 'react-router';
// ...
browserHistory.push('/sample');

参考:https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md