React 路由器在路由更改时创建两个完全相同的组件，如何在两条路由中重用相同的组件？答案

【问题标题】：React router creates two exact same components on route change, how to reuse same component across two routes?React 路由器在路由更改时创建两个完全相同的组件，如何在两条路由中重用相同的组件？
【发布时间】：2020-09-11 20:06:30
【问题描述】：

我做了一个如下所示的快速测试：

<Router>
  <Switch>
    <Route path="/foo" render={ () => <TestComponent key="test" data="1" /> } />
    <Route path="/bar" render={ () => <TestComponent key="test" data="2" /> } />
  </switch
</Router>

TestComponent 看起来像这样：

const TestComponent = withRouter(({ history, data }) => {
   const [ value, setValue ] = useState(null);
   const loading = !value;

   useEffect(() => {
      setTimeout(() => {
         setValue(data);
         history.push('/bar');
      }, 1000 );
   }, [ data ]);

   console.log("**VAL", data, value);

   return <div>
      { data } / { loading ? "LOADING" : value }
   </div>;
});

所以，当我点击路由 /foo 时，组件会加载，稍等片刻，然后使用相同的组件（尽管是不同的实例）重定向到另一条路由。

调试显示

**VAL 1 null
**VAL 1 1
**VAL 2 null          // <-- expected : VAL 2 1
**VAL 2 2
**VAL 2 2

我希望 React 看到两者是相同的组件，而不是创建不同的实例。如何让同一个组件响应两条不同的路由？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

您可以让一个Route 组件有多个路径，因此多个路径将导致相同的组件。更具体地说，Route 的 path 属性可以采用字符串或字符串数组。在此处查看文档：https://reactrouter.com/web/api/Route/path-string-string

然后，您可以使用react-router hooks 之一来确定您在哪条路线上，并在此基础上呈现您需要的任何差异。或者，您可以使用URL Parameters 或Query Parameters。

【讨论】：

看，我使用的组件对各种状态都有过渡效果，所以你的解决方案只在少数情况下有效。其他情况就像页面完全重新加载，跳过转换等等。我想我现在可以解决这个问题，但这并不理想。
如果您想进一步充实这些其他案例，我不确定我是否会关注，但很乐意与您讨论。否则，很高兴提供至少一些帮助。
如果TestComponent 的大部分在两条路由之间共享，您也可以在TestComponent 中存在Switch。
一些路线有一个滑入的侧面板，并且该面板在“常见”的路线上仍然可见，但是一旦我使用不同的侧面板设置路线，面板就不会滑动出来，但完全消失了，然后新的滑进来。很难看。我会想办法解决这个问题，但似乎react-router 在卸载路由之前无法等待......
侧面板在安装时滑入？您是否可以跟踪它是否打开，这样当您转到新页面时，它已经打开了？我个人的意见是，它应该在开始时打开或关闭，除非用户更改状态，否则不要动画。但你当然会。