React Router 4 的默认路由答案

【问题标题】：Default Route With React Router 4React Router 4 的默认路由
【发布时间】：2017-08-11 22:58:51
【问题描述】：

我目前在我的应用程序中定义了以下路由：

/
/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} />

我的步骤组件会这样做：

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 会重定向到第一个子路由。

【问题讨论】：

标签： javascript reactjs routing react-router

【解决方案1】：

其实挺简单的……

使用Redirect 组件来...好吧，重定向。

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

exact prop 保证您不会被从子路由重定向。

编辑： 毕竟，Redirect 确实支持 exact（或 strict）道具。无需包装Route。已更新答案以反映这一点。

【讨论】：

谢谢。但这仅适用于替换当前路线（和组件）。我需要容器组件StepsContainer，我将其渲染为子路由渲染的子组件的包装器。

【解决方案2】：

佩德，我认为这将解决您的问题。

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

然后在您的 StepsComponent 渲染方法中，您可以这样做。

<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 开头。呈现之后，它将根据 url 呈现嵌套路由之一。如果 url 只是“/steps”，那么它将重定向到此处列出的初始路由，在这种情况下，通过呈现重定向来“/steps/alpa”。 Switch 将使其仅呈现其中一条路线。

感谢 Andreyco 提供重定向代码。

我希望这会有所帮助。

【讨论】：