反应路由器 props.history

Question

我是 React.js 的新手，具有 asp.net 内核，我遇到了一个我不明白的错误。

我创建了这样的受保护路由：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import auth from './auth.js'

export const ProtectedRoute = ({ component: Component, ...rest }) => {
    return (
        <Route 
            {...rest} 
            render = {props => {
                if(auth.estAuthentifier()){
                    return <Component {...props}/>
                } else {
                    return <Redirect to={
                        {
                            pathname: "/",
                            state: {
                                from: props.location
                            }
                        }     
                    } />
                }

            }}
        />
    );
}

在我的 App.js 中，我添加了这样的受保护路由：

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router';
import { Login } from './components/Login'
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { ProtectedRoute } from './components/protected.route';

export default class App extends Component {
  static displayName = App.name;

  render () {
    return (
        <div>
          <Switch>
            <Route exact path="/" component={Login} />
            <Layout>
              <ProtectedRoute exact path="/home" component={Home}/>
            </Layout> 
            <Route path="*" component={() => "404 NOT FOUND"}/>
          </Switch>
        </div>
    );
  }
}

并且，Layout 组件呈现包含我的 NavBar 的所有组件：

import React, { Component } from 'react';
import { Container } from 'reactstrap';
import { NavMenu } from './NavMenu';

import '../css/Layout.css';

export class Layout extends Component {
  static displayName = Layout.name;

  render () {
    return (
      <div className="conteneur-principal">
        <NavMenu />
        <Container>
          {this.props.children}
        </Container>
      </div>
    );
  }
}

下一个问题是：我将注销按钮放在导航栏组件中，但是当我尝试注销并重定向到登录时，出现以下错误：类型错误：无法读取属性 'push' 未定义

NavMenu.js :

import React, { Component } from 'react';
import { NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
import auth from './auth';
import { withRouter } from 'react-router-dom';

import '../css/SideBarNav.css';

export class NavMenu extends Component {
  static displayName = NavMenu.name;

  constructor(props) {
    super(props);


    console.log(this.props);

    this.deconnexion = this.deconnexion.bind(this);

  }

  deconnexion = () => {  

    auth.logout(() => {
      this.props.history.push('/');     //LINE IN ERROR
    })

  }

  render () {
    return (
      <div className="conteneur-menu">
        <img src="images/familieu-logo-clear.png" alt="logo-familieu" title="logo-familieu" className="is-clickable logo-familieu"/>
        <div className="conteneur-link"> 
          <NavLink tag={Link} className="menu-link" to="/">Home</NavLink>
        </div>
        <input type="button" value="Déconnexion" className="btn-deconnexion" onClick={this.deconnexion}/>
      </div>
    );
  }
}

我应该怎么做才能让我的注销按钮起作用？

非常感谢

Answer 1

在 NavMenu.js 中，您正在导入 withRouter，但未使用。

像这样用 withRouter 包装组件的导出：

export default withRouter(NavMenu);

反应路由器 props.history

React Router props.history

reactjs

react-router

asp.net-core

react-navigation-v5