Reagieren Middleware-Auth-Komponente mit Reagieren Router

Question

Ich habe diese app.js. Ich versuche, eine Auth Komponente zu tun, ob es einfach als middleawre handeln zu überprüfen, ob Benutzer angemeldet hat.

const App = props => (
    <BrowserRouter> 
     <Provider store={store}> 
      <div className="app"> 
       <Layout> 
       <Header> 
        <Navbar /> 
       </Header> 
       <Content> 
        <Route exact path='/' component={Home} /> 
        <Route exact path='/login' component={Login} /> 
        <Route exact path='/signup' component={Signup} /> 
        <Auth> 
         <Route exact path='/task/:id' component={Task} /> 
        </Auth> 
       </Content> 
       </Layout> 
      </div> 
     </Provider> 
    </BrowserRouter> 
) 

Aber das Merkwürdige ist es ausgelöst wird, wenn ich Besuch anmelden und Anmeldungen Route.

Aussehen Meine auth.js wie diese

import React, { Component } from 'react'; 

export default class auth extends Component { 

    constructor(props) { 
     super(props) 

     const user = localStorage.getItem('user') 
     if(!user) { 
      window.location = '/login' 
     } 
    } 

    render() { 
     return (
      <div></div> 
     ); 
    } 
} 

Answer 1

Aber das Merkwürdige ist es auslösen wird, wenn ich Route um sich einzuloggen und die Registrierung besuchen.

Das Problem ist mit diesem.

<Auth> 
    <Route exact path='/task/:id' component={Task} /> 
</Auth> 

Ihre Auth Komponente wird standardmäßig immer genannt, da es keine Route ist gewickelt und nicht für Rendering angegebene Bedingung.

Korrekter Weg, dies zu tun.

Sie sollten eine Komponente höherer Ordnung verwenden.

<Route exact path='/task/:id' component={Auth(Task)} /> 

Nun wird diese Ihre Auth Komponente rufen nur, wenn Ihre genauen Pfad Aufgabe wird übereinstimmen.

Innerhalb von Auth Komponente behandelt das Rendern der gerouteten Komponente.