Reagieren Router v4 Authentifizierung Problem

Question

Ich versuche, grundlegende Authentifizierung fließen in meiner App zu reagieren.

Ich verwende redux und redux-persist, um meinen Zustand in localstorage zu speichern.

Hier ist eine PrivateRoute Komponente, Benutzerauthentifizierung zu überprüfen, dann umleiten, um sich anzumelden oder die tatsächliche Komponente (die privat ist).

Es funktioniert gut, wenn authenticated auf false gesetzt ist. Aber wenn ich mich erfolgreich anmelde, rendert es meine Komponente nicht sogar meine authenticated war wahr. (I protokolliert Variablen und ich sah, authentifiziert ist wahr, Erfolg anmelden)

import React from 'react'; 
 
import PropTypes from 'prop-types'; 
 
import { Route } from 'react-router'; 
 
import { Redirect } from 'react-router-dom'; 
 
import { isAuth } from 'redux/actions/auth/A_auth'; 
 
import App from 'layout/pages/App'; 
 
import { connect } from 'react-redux'; 
 

 
class PrivateRoute extends React.Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
    } 
 

 
    render() { 
 
     const {authenticated, component: Component, ...rest } = this.props; 
 
     console.log(this.props); 
 
     return (
 
     <Route {...rest} render={props => (
 
      authenticated ? (
 
       <App> 
 
        <Component {...props}/> 
 
       </App> 
 
      ) : (
 
       <Redirect to={{ 
 
        pathname: '/login', 
 
        state: { from: props.location } 
 
       }}/> 
 
      ) 
 
     )}/> 
 
    ); 
 
    } 
 
} 
 

 
PrivateRoute.propTypes = { 
 
    authenticated: PropTypes.bool 
 
}; 
 

 
const mapStateToProps = state => { 
 
    return { 
 
     authenticated: state.auth.authenticated 
 
    } 
 
}; 
 

 
export default connect(mapStateToProps)(PrivateRoute);

Wenn authenticated == false es Umleitungen an Login.js aber, wenn seine true es stellt nicht die tatsächliche Komponente machen. Wenn ich if-Anweisung entfernte und <App><Component.../></App rendert, funktioniert es gut, aber Authentifizierung funktioniert in diesem Fall nicht.

Hier ist meine index.js, die Root-Render ist.

render(
<Provider store={store}> 
    <Router children={routes}/> 
</Provider>, window.document.getElementById('app')); 

Und hier ist mein routes.js

import React from 'react'; 
 
import { Route } from 'react-router-dom'; 
 
import Home from 'layout/pages/home'; 
 
import NewClient from 'layout/pages/newclient'; 
 
import EditClient from 'layout/pages/editclient'; 
 
import Login from 'layout/pages/login'; 
 
import PrivateRoute from 'routes/PrivateRoute'; 
 

 
export default (
 
    <div> 
 
     <PrivateRoute path="/" component={Home} exact/> 
 
     <PrivateRoute path="/home" component={Home} exact/> 
 
     <PrivateRoute path="/client/new" component={NewClient}/> 
 
     <PrivateRoute path="/client/edit/:apiKey" component={EditClient}/> 
 
     <Route path="/login" component={Login}/> 
 
    </div> 
 
);

Dank.

Answer 1

Gelöst.

Ich änderte dieses

<Redirect to={{ pathname: '/login', state: { from: props.location } }}/>

dieser

<Login/>

Redirect Komponente verursacht Probleme immer noch nicht wissen, warum.