对于这一个，谁不控制服务器端，因此使用哈希路由器v2：

将历史记录放入单独的文件（例如app_history.js ES6）：

import { useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });

export default appHistory;

并在任何地方使用它！

react router（app.js ES6）的入口点：

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Redirect } from 'react-router'
import appHistory from './app_history'
...
const render((
  <Router history={appHistory}>
  ...
  </Router>
), document.querySelector('[data-role="app"]'));

任何组件（ES6）内的导航：

import appHistory from '../app_history'
...
ajaxLogin('/login', (err, data) => {
  if (err) {
    console.error(err); // login failed
  } else {
    // logged in
    appHistory.replace('/dashboard'); // or .push() if you don't need .replace()
  }
})

对于这一个，谁不控制服务器端，因此使用哈希路由器v2：

将历史记录放入单独的文件（例如app_history.js ES6）：

import { useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });

export default appHistory;

并在任何地方使用它！

react router（app.js ES6）的入口点：

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Redirect } from 'react-router'
import appHistory from './app_history'
...
const render((
  <Router history={appHistory}>
  ...
  </Router>
), document.querySelector('[data-role="app"]'));

任何组件（ES6）内的导航：

import appHistory from '../app_history'
...
ajaxLogin('/login', (err, data) => {
  if (err) {
    console.error(err); // login failed
  } else {
    // logged in
    appHistory.replace('/dashboard'); // or .push() if you don't need .replace()
  }
})

随着React Router v4即将推出，现在有了一种新的实现方式。

import { MemoryRouter, BrowserRouter } from 'react-router';

const navigator = global && global.navigator && global.navigator.userAgent;
const hasWindow = typeof window !== 'undefined';
const isBrowser = typeof navigator !== 'undefined' && navigator.indexOf('Node.js') === -1;
const Router = isBrowser ? BrowserRouter : MemoryRouter;

<Router location="/page-to-go-to"/>

react lego是一个示例应用程序，展示了如何使用/更新react router，它包括导航应用程序的示例功能测试。

React路由器v6

我已经有一段时间没有接触过React了，但我想感谢并强调Shimrit Snapir的以下评论：

在React Router 6.0上，<Redirect/>更改为<Navigator/>

React路由器V4

tl:dr；

if (navigate) {
  return <Redirect to="/" push={true} />
}

简单而声明性的答案是，需要将<Redirectto={URL}push={boolean}/>与setState（）结合使用

push：boolean-如果为true，重定向将向历史中推送一个新条目，而不是替换当前条目。

import { Redirect } from 'react-router'

class FooBar extends React.Component {
  state = {
    navigate: false
  }

  render() {
    const { navigate } = this.state

    // Here is the important part
    if (navigate) {
      return <Redirect to="/" push={true} />
    }
   // ^^^^^^^^^^^^^^^^^^^^^^^

    return (
      <div>
        <button onClick={() => this.setState({ navigate: true })}>
          Home
        </button>
      </div>
    )
  }
}

这里有一个完整的例子。在这里阅读更多信息。

PS.该示例使用ES7+属性初始化器初始化状态。如果你感兴趣的话，也可以看看这里。

对于最新的反应路由器dom v6

useHistory（）替换为useNavigate（）。

您需要使用：

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/your-page-link');

React路由器V4

如果您使用的是版本4，那么您可以使用我的库（无耻的插件），在那里您只需发送一个操作，一切都正常！

dispatch(navigateTo("/aboutUs"));

脱扣器