リアクタールーターV4構造

Question

ログインとサインアップコンポーネントにはMainLayoutとEmptyLayoutという2つのレイアウトがあります。

これは私の現在の構造である：

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なしでは常に一致するので、あなたは、単にあなたの<Switch/>の最後の子として<Route>...</Route>の内側にあなたの404コンテンツを置くことができます。

RRv4は非常に強力です。アプリ内のどこにでもルートを設定できるため、タイラーの回答のように/addの部分を<UsersContainer/>で処理することができます。これは一度relative routesの土地になるとさらに簡単になります。