当特定组件将呈现时如何呈现组件？答案

【问题标题】：How to render a component when a specific component will render?当特定组件将呈现时如何呈现组件？
【发布时间】：2021-08-26 15:18:01
【问题描述】：

这是示例代码：

<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' 时渲染。那么，该怎么做呢？

【问题讨论】：

如果您将添加链接或代码示例以提供更准确的解决方案。
Sidebar 将始终重新渲染。当 URL 发生变化时，如果您想保存它，您可以将其保存在其 constructor 或 componentDidMount 函数中（此处不要使用 setState）。由于这些函数被调用一次

标签： javascript reactjs routes

【解决方案1】：

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

所以你应该使用这个

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

【讨论】：

【解决方案2】：

要实现你真正想要的，你需要使用布局。

如果你引入布局，它会是这样的。

<container>
    <appbar>
    </appbar>
    <content>
        <sidebar>
        </sidebar>
        <Route path='/user/:name'>
        </Route>
    </content>
</container>

例如看看this。（需要根据自己使用的框架搜索demo）

【讨论】：