导航问题：this.props历史记录未定义

Question

我无法进入另一页，因为this.props.history似乎未定义。下面是我看到的错误的屏幕截图。请注意，我使用登录组件中的this.props.history.push("/welcome")渲染了我的welcome组件，然后工作正常。

这是我的App.js

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Login from "./Components/Login";
import "./App.css";
import Signup from "./Components/Signup";
import Welcome from "./Components/Welcome";
import RecruiterPage from "./Components/Common/RecriterPage";


function App() {
  return (
    <Router>
      <div className="App">
        <Route exact path="/signup" component={Signup} />
        <Route exact path="/" component={Login} />
        <Route exact path="/welcome" component={Welcome} />
        <Route exact path="/recruiter" component={RecruiterPage} />
      </div>
    </Router>
  );
}

export default App;

Answer 1

我的最佳猜测是，您尝试从中导航的组件是父组件的子组件，该子组件可能会或可能无法访问历史记录，因此无法访问历史记录道具。

有两种解决方法： 1.将历史作为道具从父级传递到子级组件，或者 2.在上述组件上执行以下操作：

import { withRouter } from 'react-router-dom'

...并在导出组件时，将其包装在路由器中，例如

export default withRouter(ComponentName)