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

【问题标题】：React Router - Remove Link components after clicked on?React Router - 单击后删除链接组件？
【发布时间】：2018-02-05 19:35:09
【问题描述】：

使用 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上的sn-p代码，希望能更好地说明我的问题。

【问题讨论】：

【解决方案1】：

看看这个CodeSandbox demo。

我为/ 路线创建了一条新路线。我只在这条路线上渲染<Navigations /> 组件。

这是你想要的效果吗？

【讨论】：