在写作时，正确的答案适合我

this.context.router.history.push('/');

但您需要将PropTypes添加到组件中

Header.contextTypes = {
  router: PropTypes.object.isRequired
}
export default Header;

不要忘记导入PropTypes

import PropTypes from 'prop-types';

这可能不是最好的方法，但。。。使用react router v4，下面的TypeScript代码可以为一些人提供一些想法。

在下面的渲染组件（例如LoginPage）中，可以访问router对象，只需调用router.transitionTo（'/home'）即可导航。

导航代码取自。

“react router”：“^4.0.0-2”，“反应”：“^15.3.1”，

从“react Router/BrowserRouter”导入路由器；从“react History/BrowserHistory”导入｛History｝；从“history/createBrowserHistory”导入createHistory；consthistory=createHistory（）；接口MatchWithPropsInterface{component:React.component的类型，router:路由器，历史：历史，确切地？：任何图案：字符串}类MatchWithProps扩展React.Component＜MatchWithPropsInterface，any＞{render（）{返回(<Match｛…this.props｝render={（matchProps）=>(React.createElement（this.props.component，this.props）)}/>)}}ReactDOM.渲染(<路由器>｛（｛路由器｝）=>(＜div＞<MatchWithProps justly pattern=“/”component=｛LoginPage｝router=｛router｝history=｛history｝/>＜MatchWithProps pattern＝“/login”component＝｛LoginPage｝router＝｛router｝history＝｛history｝/＞<MatchWithProps pattern=“/home”component=｛homepage｝router=｛router｝history=｛history｝/>＜缺少组件＝｛NotFoundView｝/＞</div>)}</路由器>，document.getElementById（'app'）);

对于这一个，谁不控制服务器端，因此使用哈希路由器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 4.x答案

在我这一方面，我希望有一个单独的历史对象，我甚至可以携带外部组件。我喜欢按需导入一个history.js文件，并对其进行操作。

您只需将BrowserRouter更改为Router，并指定历史属性。这对你来说没有任何改变，除了你有自己的历史对象，你可以随心所欲地操纵它。

您需要安装历史记录，即react router使用的库。

示例用法，ES6表示法：

history.js

import createBrowserHistory from 'history/createBrowserHistory'
export default createBrowserHistory()

基本组件.js

import React, { Component } from 'react';
import history from './history';

class BasicComponent extends Component {

    goToIndex(e){
        e.preventDefault();
        history.push('/');
    }

    render(){
        return <a href="#" onClick={this.goToIndex}>Previous</a>;
    }
}

如果您必须从实际从Route组件渲染的组件进行导航，还可以从props访问历史，如下所示：

基本组件.js

import React, { Component } from 'react';

class BasicComponent extends Component {

    navigate(e){
        e.preventDefault();
        this.props.history.push('/url');
    }

    render(){
        return <a href="#" onClick={this.navigate}>Previous</a>;
    }
}

对于已经使用React Router v6的用户，可以使用React Router提供的useNavigate钩子来完成。

使用此钩子进行导航非常简单：

import { generatePath, useNavigate } from 'react-router';

navigate(-1); // navigates back
navigate('/my/path'); // navigates to a specific path
navigate(generatePath('my/path/:id', { id: 1 })); // navigates to a dynamic path, generatePath is very useful for url replacements

反应路由器dom:5.1.2

该网站有3个页面，所有页面都在浏览器中动态呈现。尽管页面从未刷新，请注意React Router在浏览网站时保持URL最新。这保留浏览器历史记录，确保后面的内容按钮和书签工作正常Switch查看所有子项元素，并渲染其路径为与当前URL匹配。随时使用您有多条路线，但只需要一条一次渲染一个

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";



export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

// You can think of these components as "pages"
// in your app.

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}```