Question

是否可以通过react路由器在一个视图中处理多个独立的路由？

就像有一个通过/home渲染的组件并通过/contact在模态下打开另一个视图，而用/home渲染的组件留在背景中一样吗？

到目前为止，我只管理了1个“活动”组件。通过/contact打开模态后，home组件就消失了。

Answer 1

默认情况下，react-router会按照您渲染它们的顺序来渲染所有匹配的路由。

因此，您想要的行为是默认行为：

<main>
  <Route path="/" component={() => <h1>Home</h1>} />
  <Route path="/1" component={() => <h2>Page 1</h2>} />
  <Route path="/2" component={() => <h2>Page 2</h2>} />
</main>

在上面的路线"/1"上，代码将在第一条和第二条路线上呈现组件。

并且为了一次只渲染一条匹配的路线，我们需要使用Switch组件：

<main>
  <Switch>
    <Route path="/" component={() => <h1>Home</h1>} exact />
    <Route path="/1" component={() => <h2>Page 1</h2>} />
    <Route path="/2" component={() => <h2>Page 2</h2>} />
  </Switch>
</main>

现在，在上面的路线"/1"上，代码将仅从第二条路线渲染一个组件。 exact用于始终不匹配"/"。

这是一个完整的示例https://codesandbox.io/s/nnv800pxr4

此外，还有另一种实现此行为的方法-嵌套路由。只需渲染子路线以外的其他东西，它将在所有子路线匹配时一直渲染：

// somewhere in routes
<Route path="/home" component={HomeComponent} />

// HomeComponent content
<div>
  <h1>Some content<h1>
  <h2>Rendered every time HomeComponent are rendered!</h2>
  <Switch>
    {/* some child routes */}
    <Routes path="/contacts" component={ContactModal} />
    {/* some child routes */}
  </Switch>
</div>

请注意，当前react-router@4 lacks good nested routes API。 IMO，在react-router@3中，这些事情更容易实现。

使用React Router处理多个路由

1 个答案: