リアクタールーターはルーティングできません

Question

リアクションするには& react-router。私は反応し-ルータ-4

使用しています 私はコンポーネント を以下している - ログイン - ホーム - ヘッダー - サイドバー - コンテンツ

ログイン・コンポーネントは、ヘッダーやサイドバーのいずれかを持っていません。私は私のホームコンポーネントに

App.js

<Switch> 
    <Route exact path='/login' component={Login}/> 
    <Route exact path='/home' component={Home}/> 
</Switch> 

そして、ルーティングしていますか

はこれは、私はサイドバーとコンテンツを持っています。

Home.jsは方法

<Grid> 
    <Grid.Row> 
     <Grid.Column width={3}> 
      <SideBar/> 
     </Grid.Column> 
     <Grid.Column width={13}> 
      <Route exact path='/home/dashboard' render={() => <div>Home</div>} /> 
     </Grid.Column> 
    </Grid.Row> 
</Grid> 

サイドバーコンポーネントが値 '/ホーム/ダッシュボード' 'に' がリンクを持ってレンダリングします。

残念ながら、これは機能しません。サイドバーリンクをクリックすると、空白のページが読み込まれます。

私の理解によると、反応ルータ4では、ルータ階層内の任意の場所に経路を表示できます。これは、 'Grid.Column width = {13}' divでルートをレンダリングすることで達成しようとしていることです。

私はここで何が欠けていますか？

Answer 1

スイッチの2番目のルートが問題です。次のようになります。

<Switch> 
    <Route exact path='/login' component={Login} /> 
    <Route component={Home} /> 
</Switch>