使用 react-router 将路由定向到特定组件

Question

我想使用以下布局作为我的页面的开始屏幕：

-----------------------------
| View 1      | View 2      |
| LinkA LinkB | LinkC LinkD |
|             |             |
-----------------------------

单击 LinkA or B 时，我希望路线显示在 View 1 中，当单击 LinkC 或 D 时，我希望路线显示在 View 2.

中

我现在只有一种方法可以将多个组件发送到 App 组件来渲染 View1 和 View2，我不知道如何制作特定的路由来实际渲染它们：

  <Route path="/" component={ App }>
    <IndexRoute components={{
        view1: View1,
        view2: View2
      }} />
  </Route>

我对 react-router 的了解让我觉得我想要更多的东西：

  <Route path="/" component={ App }>
    <Route component={View1} >
      <Route to="linkA" component={View1a}/>
      <Route to="linkB" component={View1b}/>
    <Route />
    <Route component={View2} >
      <Route to="linkC" component={View2a}/>
      <Route to="linkD" component={View2b}/>
    <Route />
  </Route>

现在我的问题是如何使渲染工作如我所愿，是否有任何教程说明这一点？也许我遗漏了一些基本的东西，因为我找不到任何这样的例子以及我认为是页面基本布局的东西......

Answer 1

react-router 配置唯一关心的是根据当前 url 确定填充哪个组件 this.props.children。您没有指定在配置中显示哪些链接。您在组件中执行此操作。

在您的问题中，您说您希望开始屏幕包含两个视图。也许你的意思是两个组件？每个 URL 负责一个视图。

配置如下：

<Route path="/" component={ App }>
  <Route path="view1" component={ View1 }>
    <Route path="a" component={ View1a } />
  <Route>
  <Route path="view2" component={ View2 } />
</Route>

当 url 为 / 时，App 组件的 this.props.children 将为空。如果您使用 IndexRoute，它将使用那里指定的组件。

当 url 为 /view1 时，App 组件的 this.props.children 将呈现 View1 组件。 /view2 和 View2.

相同

当 url 为 /view1/a 时，App 分量的 this.props.children 将为 View1，而 View1 的 this.props.children 将是 View1a

因此，如果您想根据当前视图显示不同的链接，请在 View1 和 View2 组件中使用不同的链接。

使用 react-router 将路由定向到特定组件

Directing routes to specific components using react-router

reactjs

react-router