导航问题：this.props 历史显示未定义

Question

我无法转到另一个页面，因为 this.props.history 似乎未定义。下面是我看到的错误的屏幕截图。请注意，我使用登录组件中的 this.props.history.push("/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. 将 history 作为 props 从父组件传递给子组件或者 2. 在上述组件上执行此操作：

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

...并且在导出组件时，将其包装在 withRouter 中，例如

export default withRouter(ComponentName)

导航问题：this.props 历史显示未定义

Navigation issues: this.props history appears undefined

javascript

reactjs

react-router

url-routing