Reactルートコンポーネントは、「/ login」を除くすべての「/」ルートを処理します

Question

/loginを入力している間、ダッシュボードコンポーネントもレンダリングされます。ログイン中にダッシュボードコンポーネントを省略する必要があります。

Exact属性は適合しません。Dashboardには/dashboard/users、/dashboard/settingsのようなネストされたパスがあるためです。

<BrowserRouter>
    <Route path='/'>
         <div>
             <Route path='/login'   component={Login}       exact   />
             <Route path='/'        component={Dashboard}           />
         </div>
    </Route>
</BrowserRouter>   

Answer 1

Switchを使用して、最初に一致するRouteをレンダリングできます。

<BrowserRouter>
    <Route path='/'>
         <div>
            <Switch>
              <Route path='/login'   component={Login}       exact   />
              <Route path='/'        component={Dashboard}           />
            </Switch>
         </div>
    </Route>
</BrowserRouter>

Answer 2

ルートを次のように変更します。

<Route path='login' component={Login} exact />
<Route path='dashboard' component={Dashboard} />