使用 react-router 让两个视图同时存在

Question

我有两种看法：

A - "normal" 页面。
B - 半透明覆盖层。

我试图让 B 位于 A 之上，也就是说，这样人们就可以通过 B 的半透明覆盖层在背景中看到 A。

我遇到的问题是，当输入 B 的路径时，A 消失了。当然，这通常是正确的行为（新页面替换旧页面）。

如何让视图 A 在输入 B 时保持不变，否则会被新路径替换？

目前的路线是这样的：

<Switch>
  <Route path="/a" component={A} />
  <Route path="/b" component={B} />
</Switch>

Answer 1

如果路径重叠，可以使用 React-router-v4 呈现多个路由

/a/b 也将匹配 /a，只要您不使用 Switch 或 exact，两者都会被渲染，您可以像

<div>
  <Route path="/a" component={A} />
  <Route path="/a/b" component={B} />
</div>

然而，完全有可能在 A 中包含组件 B，这样每当加载 A 时，也会加载 B，但我想你可能想要独立加载 A，因此这个解决方案是不够的。

Answer 2

如果你不想修改路由，我建议让每条路由的根组件自给自足。为此，在您的 B 组件中，您还应该渲染 A。这样您就可以更好地控制您的视图。

一个组件是：

<A />

B 分量为：

<A>
  <B />
</A>

Letting two views being present at the same time with react-router