Reactjs 使用react路由器同时显示两个视图

我有两种看法：

A-一个“正常”页面。
B-半透明覆盖层

我试着让B在A的上面，也就是说，通过B的半透明覆盖层可以看到背景中的A

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

当输入B时，如何让视图A保持不变，但以其他方式被新路径替换

当前路线如下所示：

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

---

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

/a/b

也将匹配

/a

，只要您不使用

开关

或

精确

，这两个选项都将被渲染，您可以像

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

---

但是，完全可以将组件

B

放在

A

内部，这样无论何时加载

A

，都会加载

B

，但我想您可能希望独立加载

A

，因此此解决方案将不足以满足要求。

如果您不想修改路由，我建议使每个路由的根组件自给自足。为了做到这一点，在你的B组件中，你也应该渲染A。这样你就能更好地控制你的视图

一个组成部分是：

<A />

<A>
  <B />
</A>

B组成部分应为：

<A />

<A>
  <B />
</A>

您的路线目前看起来如何。另外，您使用哪一版本的react路由器use@ShubhamKhatri更新的问题。如你所知，这不是react路由器的行为。但归根结底，它们都只是组件，一个组件可以重复使用任意次数。为什么不直接将A导入B，并使用一些CSS来创建效果呢？请注意，这意味着A加载时B总是加载的，而OP可能不是这样wants@Shubham，我不明白你的意思。我猜你颠倒了组件。你的意思是，当B被加载时，A总是被加载，我的意思是，每当A被加载时，B被加载。OP可能只想在没有BSo的情况下加载A，在这种情况下，他的A组件将只呈现A。好的，我明白了，所以我提到了创建两个组件，一个是A，另一个是B。A只包含一个代码，而B包含A和B的代码。