リアクションルータを備えたミドルウェア認証コンポーネントに反応します

Question

私はこのapp.jsを持っています私は

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

。それは単にユーザーがログインしているかどうかを確認するためにmiddleawreとして機能するかどうかAuthコンポーネントを実行しようしかし、奇妙なことは、私は、ルートにログインし、サインアップするために訪問したときに、それが引き金となります。

私auth.jsこの

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

のように見える。しかし奇妙なことは、私は、ルートにログインし、登録に訪れたときに、それが引き金となります。

この問題はこの問題です。ラップされているいかなるRouteとレンダリングのために指定されていない状態が存在しないよう

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

はあなたのAuthコンポーネントは、デフォルトで呼ばなっています。

これを行う正しい方法。

上位コンポーネントを使用する必要があります。

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

さて、これはあなたの正確なタスクのパスが一致する場合にのみ、あなたのAuthコンポーネントを呼び出します。

Authのコンポーネントは、ルーティングされたコンポーネントのレンダリングを処理しました。