Default-Route Mit Reagieren Router 4

fI derzeit die folgenden Strecken definiert, die in meiner Bewerbung:

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

Könnte auch visualisiert werden, wie diese:

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

Mein root-Element sieht wie folgt aus:

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

Meine Schritte-Komponente wird:

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

Dies alles funktioniert gut, aber ich will nicht steps zu existieren, als die route in seinem eigenen Recht. Nur Ihr Kind Routen werden sollte besuchbar. Ich bin auf der Suche zu verlieren, die /steps route zu verlassen meine Routen als:

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

Wie sollte ich bei der Konfiguration der Routen für diesen? Im Idealfall schlagen /steps würde redirect auf das erste child-route.

InformationsquelleAutor Undistraction | 2017-03-20
  1. 12

    Eigentlich ist es ziemlich einfach...

    Verwenden Redirect Komponente... naja, umleiten.

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

    exact prop garantiert werden Sie nicht weitergeleitet werden, von der sub-route.

    Edit: schließlich Redirect unterstützt exact (oder strict) Requisiten. Keine Notwendigkeit, wrap in Route. Antwort aktualisiert, um widerzuspiegeln, dass.

    • Danke. Aber das wird nur funktionieren, wenn Sie die aktuelle route (und Komponente). Ich muss die container-Komponente StepsContainer ich bin rendering als ein wrapper um die untergeordnete Komponente gerendert, die von der Kind-route.
    InformationsquelleAutor Andreyco
  2. 5

    Pedr,
    Ich denke, dass dies wird Ihr problem lösen.

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

    Und dann in Ihre StepsComponent render-Methode, können Sie dies tun.

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

    Was wird dies tun, ist, daß Ihre Schritte Komponente, da er die route beginnt mit /Schritte. Danach gerendert wird, dann wird es Rendern einer der geschachtelten Reiserouten basierend auf der url. Wenn die url einfach "/Schritte", dann wird es redirect auf die ursprüngliche route, die hier aufgelistet werden, in diesem Fall "/Schritte/alpa" durch Erbringung der Umleitung. Der Switch macht es so, dass es rendert nur eine der Routen.

    Kredit Andreyco für die Umleitung code.

    Ich hoffe, das hilft.

    InformationsquelleAutor Guardian_nw
Schreibe einen Kommentar