javascript - 当特定组件要渲染时如何渲染组件？

Question

这是示例代码:

<Route exact path='/user'>
    <UsersList />
</Route>
<Route path='/user/:name'>
    <Sidebar />
    <User />
</Route>

• UsersList组件就像一个主页/登陆页面。
• UsersList和Sidebar这两个组件都包含链接列表。当我们点击任何链接时，我们将被重定向到该用户页面。
• User组件将呈现该特定用户的信息。

假设我们正在 /user/john并想继续/user/jack 。但是当我这样做时，即当我单击链接从 /user/john 转到时至/user/jack , React 正在重新渲染 Sidebar组件。

但我想要那个Sidebar组件应该仅渲染一次并且仅在 path='/user/:name' 时渲染。那么，该怎么做呢？

Answer 1

如果您可以将 Sidebar 组件移出 Route 组件，则使用 React.Fragment简写标记作为所有 JSX 元素的父组件。

所以你应该使用这个

<>
  <Sidebar />
  <Route path='/user/:name'>
    <User />
  </Route>
</>