即使 UI 与它的 react-router 路由不匹配，它是否可以保持呈现？答案

【问题标题】：Can a UI be kept rendered even if it does not match its react-router route?即使 UI 与它的 react-router 路由不匹配，它是否可以保持呈现？
【发布时间】：2021-04-16 21:46:00
【问题描述】：

这里有人知道是否有可能做类似屏幕录制中发生的事情吗？ https://www.dropbox.com/s/snhhbeq8knk5dyc/modal-window-routing.mp4?dl=0

这是关于路由一个模态窗口，同时保持下面的 UI 不变。通常我会说要在 React 路由器中实现这一点，URL 需要对后面的内容和模态进行编码。也许有一些嵌套方案（例如/mainview/settings/general）。但是 Outlook web 设法做到了这一点，而不是在 URL 中反映触发模式时存在的视图。

请注意在录音中设置模式的 URL 是如何相同的，无论您是从草稿还是已发送项目或任何地方打开它。但是，您打开的视图会保持渲染，当您关闭模态框时会返回到该视图。

【问题讨论】：

reactrouter.com/web/example/modal-gallery 直接来自 react-router-dom 文档
谢谢！我在 React 路由器 v6 中，所以我会看看它是否可以适应，但看起来很有希望。
不幸的是，它还不能在 react-router v6 中工作。 Routes 组件（替换 v5 Switch 组件）还没有 location 属性 (github.com/ReactTraining/react-router/issues/7117)。但是，@RobertTerrell 的回答仍然是正确的。是否愿意将其添加为正确答案，以便我可以将其标记为正确答案？
我已经输入了我的答案，谢谢！

标签： reactjs routes react-router nested-routes

【解决方案1】：

根据 react-router-dom 文档，以下链接列出了实现所需结果的正确方法https://reactrouter.com/web/example/modal-gallery

【讨论】：

一个警告：它还不能在 react-router v6 中工作。 Routes 组件（替换 v5 的 Switch 组件）还没有 location 属性（github.com/ReactTraining/react-router/issues/7117）。