web-dev-qa-db-ja.com

デフォルトルートReactルーター4

現在、私のアプリケーションでは次のルートが定義されています。

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

これは次のように視覚化することもできます。

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

私のルートコンポーネントは次のようになります：

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

My Stepsコンポーネントはこれを行います：

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

これはすべてうまく機能しますが、stepsがそれ自体でルートとして存在することは望ましくありません。その子ルートのみがアクセス可能である必要があります。だから私は/stepsルートを失い、私のルートをそのままにしておきたい：

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

このためにルートをどのように構成する必要がありますか？理想的には、/stepsを押すとリダイレクトが最初の子ルートになります。

javascriptreactjsroutingreact-router
16
Undistraction

実際、それはかなり簡単です...

Redirectコンポーネントを使用して...さて、リダイレクトします。

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

exact propは、サブルートからリダイレクトされないことを保証します。

編集：結局、Redirectはexact（またはstrict）の小道具をサポートします。 Routeでラップする必要はありません。それを反映するために回答が更新されました。

12
Andreyco

Pedr、これはあなたの問題を解決すると思います。

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

そして、StepsComponentのrenderメソッドで、これを行うことができます。

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

これは、ルートが/ stepsで始まるため、stepsコンポーネントをレンダリングします。レンダリング後、URLに基​​づいてネストされたルートの1つをレンダリングします。 URLが「/ steps」の場合、ここにリストされている最初のルート、この場合は「/ steps/alpa」にリダイレクトをレンダリングしてリダイレクトします。スイッチは、ルートの1つだけをレンダリングするようにします。

リダイレクトコードはAndreycoの功績によるものです。

これがお役に立てば幸いです。

5
Guardian_nw