javascript - React Router - 单击后删除链接组件？

Question

使用 React Router 时，当单击 Link 并且路由完成时，如何卸载/删除 Link 组件所在的 div 或 Link 组件本身？

例如，我有一个结构如下的应用程序:

==Header==
==Link1 Link2==

当用户被路由到Link1时，==Link1 Link2== div 应该被卸载/删除并替换为 Link1 的内容。像这样:

==Header==
==Content of Link1, with a "back" button links to home page==

当用户单击 Link1 时，我能够呈现 Link1 的内容在导航栏中，我努力重组BrowserRouter , Route , div标签，但结果仍然是这样的:

==Header==
==Link1 Link2==
==Content of Link1, with a "back" button links to home page==

这是CodeSandbox上的代码片段，我希望它可以更好地说明我的问题。

CodeSandbox demo

Answer 1

看看这个 CodeSandbox demo .

我为 / 创建了一条新路线路线。我正在渲染 <Navigations />组件仅在此路由中。

这就是您想要的效果吗？