React Router - Route children 和 component props 有什么区别

【问题标题】：React Router - What is the difference between Route children and component propsReact Router - Route children 和 component props 有什么区别
【发布时间】：2021-02-21 09:39:18
【问题描述】：

我在理解这之间的区别时遇到了一些麻烦：

<Route path="user/:id" component={UserComponent} />

还有这个：

<Route path="user/:id" children={<UserComponent/>} />

使用 React Router 时在 Switch 组件内。

在这两种情况下，如果 url 看起来像“/user/4322”，这些组件就会呈现。我正在阅读 React Router 文档，但我无法正确理解这个用例（https://reactrouter.com/core/api/Route/route-props）

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

好的，我明白了：

https://forum.freecodecamp.org/t/react-router-what-is-the-difference-between-route-children-and-component-props/429503

来自 FreeCodeCamp 论坛的@DanCouper 完美解释：

第一个是如果你想在路由时挂载一个新组件火柴。这是最常见的样子：你有一组路线，它们都打开一个新的“屏幕”，最后一个组件卸载，新组件安装，一切都被吹走。这是最简单的方法做事。

第二个是如果你想要一些东西一直渲染而不是重新安装。因此，例如，如文档中的示例所示，您有一组导航链接，并且您希望在路线上在它们之间制作动画改变。如果您使用组件，这将不起作用，因为新的组件每次都会挂载，并且动画不会发生。但是因为使用了children，仍然可以有URL的变化浏览器，但不是每次访问 URL 时都让一切都被吹走变化。

儿童（和渲染）将更加繁琐地使用大部分时间，因为它们迎合了不太常见的情况（在儿童的情况下，防止每次路由更改时创建新组件，允许 UI 根据路由动态变化）。

【讨论】：