React中間件auth組件與反應路由器

Question

我有這個app.js.我嘗試做一個驗證組件是否它只是作爲一個middleawre來檢查用戶是否已登錄。

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

但奇怪的是，當我訪問登錄並註冊路線就會觸發。

我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

但奇怪的是，當我訪問登錄並註冊路線就會觸發。

問題在於這個。

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

你Auth分量越來越默認名稱，因爲沒有Route被包裹並沒有呈現特定的條件。

正確的方法來做到這一點。

您應該使用更高階的組件。現在

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

，這樣只會叫你Auth組件時，您的具體任務路徑將匹配。

Auth裏面的組件處理了路由組件的渲染。