Comment obtenir le routage XOR de deux composants avec React Router?

Question

My App - compoment ressemble à quelque chose comme ceci:

class App extends Component { 
    render() { 
     return (
      <div> 
       <Route path='/:category?/:post?' component={Posts}/> 
       <Route exact path='/edit' component={PostForm}/> 
      </div> 
     ) 
    } 
} 

Maintenant, le problème est que je veux avoir XOR comportement, à savoir lorsque le premier composant est rendu, je ne veux pas le second à être rendu et vice versa. Ce que j'ai réellement obtenu c'est qu'avec une URL comme localhost3000/books/123344 seul le premier composant est rendu, mais avec l'URL localhost3000/create, les deux composants sont rendus.

Quelle est la raison pour cela et comment puis-je obtenir le rendu XOR souhaité des deux composants?

Answer 1

Utiliser le routeur de réaction switch, il ne rendra qu'un composant. Changez également l'ordre des routes.

Essayez ceci:

<Switch> 
    <Route exact path='/edit' component={PostForm}/> 
    <Route path='/:category?/:post?' component={Posts}/> 
</Switch>