React Router props.history - PullRequest
Новая
       35

React Router props.history

0 голосов
/ 28 апреля 2020

Я новичок в 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
                            }
                        }     
                    } />
                }

            }}
        />
    );
}

В моем приложении. 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>
    );
  }
}

Проблема заключается в следующем: я помещаю кнопку выхода из системы в свой компонент панели навигации, но когда я пытаюсь выйти из системы и перенаправить на страницу входа в систему, я получил следующую ошибку: TypeError: Невозможно прочитать свойство 'pu sh 'of undefined

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>
    );
  }
}

Что нужно сделать, чтобы кнопка выхода из системы заработала?

Большое спасибо

1 Ответ

1 голос
/ 28 апреля 2020

В NavMenu. js вы импортируете withRouter, но не используете.

Заверните экспорт компонента с withRouter следующим образом: 

export default withRouter(NavMenu);
...