Question

我有两种观点：

A - ＆＃34;正常＆＃34;页面。
B - 半透明叠加。

我试图将B放在A的顶部，即通过B的半透明叠加层可以看到背景中的A.

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

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

目前路线看起来像这样：

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

然而，完全有可能在B中包含A组件，以便每次加载A时{}都加载B，但我想您可能要加载A {1}}独立，因此这个解决方案是不够的。

Answer 2

如果您不想修改路线，我建议让每条路线的根部分自给自足。为了做到这一点，在B组件中你也应该渲染A.这样你就可以更好地控制你的视图。

组件是：

<A />

B组件：

<A>
  <B />
</A>