我在使用React Router V5时遇到了同样的问题。当尝试在下面以编程方式更改路由时，

this.props.history.push({
    pathname: `/target-path`,
    state: variable_to_transfer
});

• this.props.history* was***undefined***。

下面是我的react router v5解决方案。

import React, { Component } from "react";
import { withRouter } from 'react-router-dom';

class MyClass extends Component {
    routingFunction = (param) => {
        this.props.history.push({
            pathname: `/target-path`,
            state: param
        });
    }
    ...
}
export default withRouter(MyClass);

这里是reference article。希望它能帮你保存时间。

更新 Next.js

您应该在Next.js中的'next/router'中使用withRouter。

import React, { Component } from "react";
import { withRouter } from 'react-router-dom';

class MyClass extends Component {
  routingFunction = (param) => {
     this.props.router.push('/dashboard');
  }
  ...
}
export default withRouter(MyClass);

使用**history.push("/...")导航到其他组件
在v6中，使用useNavigation()钩子的功能组件中使用navigate("/...")。
在react-router-dom v6中，useHistory()已经被替换为useNavigation()钩子，这就是为什么history.push("/...")**不能再使用的原因。
为了更好地理解，请参阅正式文件

const BasicExample = () => {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
};
const Header = () => (
  <ul className="navbar">
    <li>
      <NavLink to="/"> Home </NavLink>
    </li>
    <li>
      <NavLink to="/about"> About </NavLink>
    </li>
  </ul>
);
const About = () => (
  <div style={{ backgroundColor: "lightgreen", height: "100vh" }}>
    <div>About</div>
    ....
  </div>
);

const Home = () => {
  const navigate = useNavigate();
  const handleClick = () => {
    navigate("/about");
  };
  return (
    <div>
      <h2>Home</h2>
      <button onClick={handleClick}>Click to navigate about page</button>
    </div>
  );
};

Live Demo in CodeSandbox

类组件

对于基于类的组件，可以这样使用

this.props.history.push({
    pathname: `/path-name`,
    state: data_to_pass //You can pass data to the component where you are navigating
});

但是在v6中，你可以使用**Navigation**元素导航到其他组件。

示例

设置isOk state true，导航关于组件。

{this.state.isOk && <Navigate to="/about" replace={true} />}

我没有评论一个答案的声誉，这是一个除了阿克塔瓦希德的答案。
以下是一些您可能会发现有用的信息，自动在props中给予这些值，以使用Route功能：

<Route path="/about" component={About} />

无法读取未定义的属性（阅读“push”）
{match：Object，location：对象，历史记录：Object，staticContext：undefined}
上面的例子只适用于不想在props中添加任何其他值的情况。如果我们将组件作为子组件传递给Route，则渲染会正确完成，路由也会正常工作。

<Route exact path="/" > <Home name="toto" /></Route>

但是在这种情况下，Route不会将props传递给我们的组件，所以我们不会有histoy，location等。
{name：“foo”}
如果您使用this.props.history.push（“/about”）;这将生成错误，因为历史记录未添加到组件
无法读取未定义的属性（阅读“push”）
下面是一个允许Route组件带有回调的解决方案

<Exact route path="/"
  
   render={(props) =><Home name="foo" {...props}/>}
   ></Road>

{name：“foo”，匹配：对象，位置：对象，历史记录：Object，staticContext：undefined}

只需将所有内容 Package 在**内，并使用** 创建一个对象字面量，如：

import { BrowserRouter } from 'react-router-dom';
...
...
return(
   <BrowserRouter>
      ...
      ...
   </BrowserRouter>
)

在函数中，用途：

import { useHistory } from 'react-router-dom';
...
...
const history = useHistory();

function handlePush() {
...
history.push('/url');
...
}

这对你来说应该很有用。乐意效劳通过🥰RTTS。