React Router - 单击后删除 Link 组件？

Question

当使用 React Router 时，当 Link被点击，路由完成？

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

==Header==
==Link1 Link2==

当用户被路由到 Link1 时，==Link1 Link2== div 应该是 unmounted/removed 并替换为 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 /> 组件。

这是您想要的效果吗？