React routeur: Comment rendre deux composants différents sur des pages différentes?

Question

Je construis une application de réaction. J'utilise rea-routeur-dom V4.

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

Comment rendre ces deux composants différents sur des pages différentes? Voici comment la sortie ressemble:

TodoReact APP

Answer 1

Vous devez ajouter exact attribut à votre itinéraire racine /, actuellement les deux routes correspondent /about, afin que les deux composants montreront:

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