Reactjs this.props.history未定义

我的App.js

import React, { Component } from 'react';
import './App.css';
import Continue from './components/Continue';
import Login from './components/Login';
import Table from './components/Table';
import Profile from './components/Profile';
import { BrowserRouter,Switch, Route,Redirect } from 'react-router-dom'


function loggedIn() {
   return !!localStorage.getItem('token');
}
class App extends Component {
   render() {
return (
  <div className="App">
    <BrowserRouter  >
      <Switch>
          <Route exact path = "/" component ={Login}/>
          <Route
            exact
            path = "/continue"
            component = {() =>
              loggedIn() ? <Continue /> : <Redirect to="/" />}
          />
          <Route
            exact
            path = "/home"
            component={() =>
              loggedIn() ? <Table /> : <Redirect to="/" />}
          />
          <Route
            exact
            path = "/profile"
            component={() =>
              loggedIn() ? <Profile /> : <Redirect to="/" />}
          />        </Switch>
  </BrowserRouter>
  </div>
  );
 }
 }

  export default App;

这是成功的

但是从继续当我试图以同样的方式推到/home时

 this.props.history.push('/home');

它抛出了一个错误

TypeError:this.props.history未定义

如果我删除了loggedIn（）作为登录路径，那么它就可以工作了

---

需要一些帮助来了解如何将道具历史记录发送到其他组件。

只有当您的组件是路由组件时，此.props.history

才有效。查看您的登录组件。它位于

浏览器路由器

下，作为

路由

的一部分。如果需要作为单页应用程序重定向到另一页（组件），则需要使用

useHistory

from

react router dom

/

react router

import React, { Component } from 'react';
import './App.css';
import Continue from './components/Continue';
import Login from './components/Login';
import Table from './components/Table';
import Profile from './components/Profile';
import PropTypes from "prop-types";
import { BrowserRouter,Switch, Route,Redirect } from 'react-router-dom'


function loggedIn() {
 return !!localStorage.getItem('token');
}
class App extends Component {
  render() {
    const {location} = this.props.location;
    return (
     <div className="App">
       <BrowserRouter  >
         <Switch>
           <Route exact path = "/" component ={Login}/>
           <Route
             exact
             location={location}
             path = "/continue"
             component = {() =>
             loggedIn() ? <Continue /> : <Redirect to="/" />}
          />
          <Route
            exact
            location={location}
            path = "/home"
            component={() =>
            loggedIn() ? <Table /> : <Redirect to="/" />}
          />
         <Route
           exact
           location={location}
           path = "/profile"
           component={() =>
           loggedIn() ? <Profile /> : <Redirect to="/" />}
         />        
       </Switch>
     </BrowserRouter>
    </div>
   );
  }
 }
 App.propTypes = {
  location: PropTypes.shape({
   pathname: PropTypes.string.isRequired,
  }).isRequired
 };

 export default App;

import { useHistory } from 'react-router-dom';
    const LNav = (props) => {
    let history = useHistory();
    return (
        <nav className="navbar navbar-expand-lg navbar-dark bg-danger" style={{marginBottom: "5px"}}>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarNav">
                <ul className="navbar-nav nav-right" id="app-navbar">
                    <li className="nav-item">
                        <a className="nav-link" href="javascript:void(0);" onClick={() => history.push(props.add)}><i className="fa fa-plus"></i> Tambah Data</a>
                    </li>
                </ul>
            </div>
        </nav>
    );
};
export default LNav;

从'react router dom'导入{useHistory}；
常量LNav=（道具）=>{
让历史=使用历史（）；
返回(




);
};
导出默认LNav；

---

看看那个部件。这是一个功能组件（无状态组件），根据挂钩规则，它只与功能组件而不是类组件一起工作。

将“位置”添加到每个组件中！你能解释一下吗。我不知道把这些代码放在哪里（我不能将const{location}放在路由器内。：）我已经编辑了整个代码。如果您遇到任何问题或上述解决方案是否有效，请检查并告知我。不要犹豫发表评论：）快乐编码我认为您需要使用HoC

和router

包装导出的组件。你可以在这里了解更多。

npm install --save prop-types

import { useHistory } from 'react-router-dom';
    const LNav = (props) => {
    let history = useHistory();
    return (
        <nav className="navbar navbar-expand-lg navbar-dark bg-danger" style={{marginBottom: "5px"}}>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarNav">
                <ul className="navbar-nav nav-right" id="app-navbar">
                    <li className="nav-item">
                        <a className="nav-link" href="javascript:void(0);" onClick={() => history.push(props.add)}><i className="fa fa-plus"></i> Tambah Data</a>
                    </li>
                </ul>
            </div>
        </nav>
    );
};
export default LNav;