Question

fI目前在我的申请中定义了以下路线：

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

Answer 1

实际上，它非常简单......

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

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

exact道具保证您不会从子路线重定向。

毕竟

修改，Redirect支持exact（或strict）道具。无需包裹Route。答案已更新，以反映这一点。

Answer 2

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

$ undefined method `parse' for Location:Module (NoMethodError)

然后在您的StepsComponent渲染方法中，您可以执行此操作。

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

这样做会渲染您的步骤组件，因为路径以/步骤开头。在渲染之后，它将基于url呈现一个嵌套路由。如果url只是“/ steps”，那么它将重定向到此处列出的初始路由，在本例中为“/ steps / alpa”，通过呈现重定向。 Switch会使它只渲染其中一条路径。

感谢Andreyco的重定向代码。

我希望这会有所帮助。

使用React Router 4的默认路由

2 个答案: