React Router 4 - Définition des routes de mise en page sans chemins

Question

Je suis confronté à des problèmes de définition de routes de mise en page sans chemin (ce qui était possible dans le routeur de réaction 3). Fondamentalement, ce que Im essayant d'atteindre quelque chose comme: Dans mes index.js:

<Router history={history}> 
     <Route path="/" component={App}/> 
    </Router> 

Dans mon composant App définissent les dispositions

<Switch> 
    <Route path="" component={AuthLayout}/> 
    <Route path="" component={MainLayout}/> 
</Switch> 

maintenant parce qu'ils sont tout simplement mises en page, je les veux effectuer certaines fonctionnalités et définir leurs routes imbriquées, par exemple

dans le AuthLayout:

<Switch> 
    <Route exact path={`${match.path}/sign-up`} component={SignUpContainer}/> 
    <Route exact path={`${match.path}/login`} component={LoginContainer}/> 
           <Route component={SignUpContainer}/> 
</Switch> 

et en MainLayout:

<Switch> 
     <Route exact path={`${match.path}/explorer`} component={ExplorerContainer}/> 
//more routes 
     <Route component={NotFoundContainer}/> 
    </Switch> 

Maintenant, je sais que cela ne fonctionnera pas parce que l'interrupteur sera toujours frappé le premier élément, et sans commutateur il va rendre les deux composants. Ce que je veux réaliser est une URL peu profonde, donc je ne veux pas définir de routes pour les mises en page. Il était possible RRTR 3 mais je ne peux pas savoir si je peux le faire en RRTR 4

juste pour la référence en 3 je l'ai fait comme ceci:

<Route path="/" component={App}> 
      <IndexRedirect to="login"/> 
      /*Profile Management Flows*/ 
      <Route path="" component={AuthLayout}> 
       <Route path="login" component={LoginContainer}/> 
       <Route path="sign-up" component={SignUpContainer}/> 
       <Route path="forgot-password" component={ForgotPasswordContainer}/> 
       <Route path="reset-password" component={ResetPasswordContainer}/> 
       <Route path="on-boarding" component={OnBoardingContainer}/> 


      </Route> 

Un conseil? devrais-je simplement abandonner et ajouter un chemin à chaque mise en page? devrais-je m'en tenir à RRTR3?

Answer 1

Ouais, vous ne serez pas en mesure de faire exactement ce que vous avez fait avec réagissez routeur 3. Je pense que quelque chose de semblable pourrait être accompli avec les éléments suivants:

<Switch> 
    <Route path="/(login|signup|forgot-password|reset-password)" render={({ location }) => (
    <AuthLayout> 
     <Switch> 
      <Route path="/login" component={/* ... */} /> 
      <Route path="/signup" component={/* ... */} /> 
      {/* ... */} 
     </Switch> 
    </AuthLayout> 
)} /> 
    <Route path="/" component={MainLayout} /> 
</Switch> 

Answer 2

Je recommande de placer tous vos itinéraires dans un seul commutateur et spécifiez quelle disposition utiliser dans chaque conteneur. Ce sera plus facile à maintenir.

<Switch> 
    <Route path="/sign-up" component={SignUpContainer}/> 
    <Route path="/login" component={LoginContainer}/> 
    <Route path="/explorer" component={ExplorerContainer}/> 
    <Route path="/" component={MainLayout} /> 
</Switch> 

Si vous souhaitez protéger les routes des utilisateurs non autorisés, vous pouvez utiliser un composant d'ordre supérieur . Je lui ai expliqué comment cela peut être réalisé ici: React router v4 - Authorized routes and components

Je trouve l'article suivant sur React Router 4 très utile: https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf