React路由器V4結構

Question

我有兩種佈局：登錄和註冊組件的MainLayout和EmptyLayout。

這是我目前的結構：

import { BrowserRouter as Router, Route } from 'react-router-dom'; 

const App =() => (
    <Router> 
    <Switch> 
     <Route exact path="/login"> 
     <EmptyLayout> 
      <LogInContainer /> 
     </EmptyLayout> 
     </Route> 
     <Route path="/"> 
     <MainLayout> 
      <Switch> 
      <Route exact path="/marketing" > 
       <MarketingComponent /> 
      </Route> 
      <Route exact path="/dashboard" > 
       <DashboardContainer /> 
      </Route> 
      <Route exact path="/admin/users" > 
       <UsersContainer /> 
      </Route> 
      <Route exact path="/admin/users/add" > 
       <AddUsersContainer /> 
      </Route> 
      </Switch> 
     </MainLayout> 
     </Route> 
    </Switch> 
    </Router> 
); 

這是一個好辦法？ 如何在這裏包含404頁面？

<EmptyLayout> 
    <NotFound /> 
</EmptyLayout> 

Answer 1

的<Switch/>組件呈現第一個匹配的<Route/>和<Route/>沒有path總是匹配，所以你可以簡單地把你的404裏面的內容<Route>...</Route>爲您<Switch/>的最後一個孩子。

這就是說，RRv4是非常強大的，因爲你可以在你的應用程序的任意位置設置路線，所以喜歡在泰勒的回答，你可以讓路由的/add部分在<UsersContainer/>處理。一旦relative routes土地，這將更容易。