Question

我的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;

然后从登录表单推送到路线 / continue

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

这种情况成功发生。

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

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

它会抛出错误

TypeError：this.props.history未定义

如果我删除 loggedIn（）使其成为登录路线，那么它就可以了。

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

Answer 1

this.props.history仅在您的组件是路由组件时才有效。查看您的登录组件。它在BrowserRouter下，并且是Route的一部分。如果您需要作为单页应用程序重定向到另一个页面（组件），则需要使用useHistory / react-router-dom

中的react-router

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;

查看该组件。那是一个功能组件（无状态组件），根据钩子规则，它仅适用于功能组件而不是类组件。

Answer 2

Elipse Neon with JDK 1.8 and run time environment GlassFish 4.1.

如果您没有安装prop-types软件包，请使用

The currently selected JAXB library provider is invalid.

this.props.history是undefined react-router-dom

2 个答案: