リアクタ・ルータ：異なるページに2つの異なるコンポーネントをレンダリングする方法は？

Question

私はリアクションアプリを構築しています。私はreact-router-dom V4を使用しています。

class TodoApp extends React.Component{ 
    render(){ 
     return(
      <Router> 
       <div> 
        <Route path='/' component={TodoComponent}></Route> 
        <Route path='/about' component={About}></Route> 
       </div> 
      </Router> 
     ); 
    } 
} 

どのようにしてこれらの2つの異なるコンポーネントを別のページにレンダリングできますか？これは、出力がどのように見えるかです：

TodoReact APP

Answer 1

あなたはので、両方のコンポーネントが表示され、現在は両方のルートが​​と一致し、あなたのルート/ルートにexact属性を追加する必要があります。

<Route exact path="/" component={TodoComponent} />