web-dev-qa-db-fra.com

Route par défaut avec React Router 4

fJ'ai actuellement les itinéraires suivants définis dans mon application:

/
/selectSteps
/steps
/steps/alpha
/steps/beta
/steps/charlie

Qui pourrait également être visualisé comme ceci:

- (home)
    - selectSteps
    - steps
       - alpha
       - beta
       - charlie

Mon composant racine ressemble à ceci:

  <Route path="/" exact component={Home} />
    <Route path="/select-steps" render={() => <StepSelectorContainer />} />
    <Route path="/steps" component={StepsContainer} />

Le composant My Steps fait ceci:

steps.map(step => (
  <Route
    path={fullPathForStep(step.uid)}
    key={shortid.generate()}
    render={() => <StepContainer step={step} />}
  />

Tout cela fonctionne bien, mais je ne veux pas que steps existe en tant que route à part entière. Seuls ses itinéraires enfants doivent être visitables. Je cherche donc à perdre le /steps itinéraire pour quitter mes itinéraires comme:

/
/selectSteps
/steps/alpha
/steps/beta
/steps/charlie

Comment dois-je configurer mes itinéraires pour cela? Idéalement, frapper /steps serait rediriger vers la première route enfant.

javascriptreactjsroutingreact-router
16
Undistraction

En fait, c'est assez simple ...

Utilisez le composant Redirect pour ... eh bien, rediriger.

<Redirect from="/steps" exact to="/steps/whatever" />

exact prop garantit que vous ne serez pas redirigé depuis le sous-itinéraire.

Edit: après tout, Redirect prend en charge les accessoires exact (ou strict). Pas besoin d'envelopper dans Route. Réponse mise à jour pour refléter cela.

12
Andreyco

Pedr, je pense que cela résoudra votre problème.

<Route path="/" exact component={Home} />
<Route path="/select-steps" render={() => <StepSelectorContainer />} />
<Route path="/steps" component={StepsComponent} />

Et puis, dans votre méthode de rendu StepsComponent, vous pouvez le faire.

<Switch>
{steps.map(step => (
    <Route
        path={fullPathForStep(step.uid)}
        key={shortid.generate()}
        render={() => <StepContainer step={step} />}
    />}
<Redirect from="/steps" exact to="/steps/alpha" />
</Switch>

Ce que cela va faire, c'est rendre le composant de vos étapes parce que la route commence par/étapes. Après cela, il rendra l'un des itinéraires imbriqués en fonction de l'URL. Si l'URL est juste "/ steps", alors elle redirigera vers l'itinéraire initial répertorié ici, dans ce cas "/ steps/alpa" en rendant la redirection. Le commutateur fera en sorte qu'il ne rende que l'un des itinéraires.

Nous remercions Andreyco pour le code de redirection.

J'espère que ça aide.

5
Guardian_nw