当前位置: 首页 > 知识库问答 >
问题:

React路由器-路由子程序和组件道具的区别是什么

充培
2023-03-14

我很难理解这两者之间的区别:

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

这是:

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

使用React路由器时,在交换机内组件。

在这两种情况下,如果url看起来像"/user/4322",这些组件将呈现。我正在阅读React路由器留档,但我不能正确理解这个用例(https://reactrouter.com/core/api/Route/route-props)


共有1个答案

夹谷志
2023-03-14

好吧,我知道了:

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

@DanCouper从FreeCodeVillage论坛完美地解释了这一点:

第一个是当路由匹配时是否要装载新组件。这是最常见的情况:您有一组路由,它们都打开一个新的“屏幕”,最后一个组件卸载,新组件装载,所有东西都被吹走。这是最简单的做事方式。

第二个问题是,如果您希望始终呈现某些内容,而不是重新装载。例如,在文档中的示例中,您有一组导航链接,并且希望在路线更改时在它们之间设置动画。如果您使用组件,这将不起作用,因为新组件每次都会挂载,并且动画不会发生。但是,由于使用了子级,因此仍然可以在浏览器中更改URL,但不会在每次URL更改时将所有内容都吹走。

儿童(和渲染)将在大部分时间内更加灵活地使用,因为他们迎合不太常见的场景(在儿童的情况下,防止每次路由更改时创建新组件,允许UI根据路由动态更改)。

 类似资料:
  • 本文向大家介绍react的路由和普通路由有什么区别?相关面试题,主要包含被问及react的路由和普通路由有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 如果不使用 React Router,组件之间的嵌套,会使URL变得复杂,为了让我们的 URL 解析变得更智能,我们需要编写很多代码来实现指定 URL 应该渲染哪一个嵌套的 UI 组件分支。 而React Router 知道如何为我们搭建嵌

  • 我试图使用react router将props从app.jsx传递到某个路由组件,但出现以下错误

  • 问题内容: 我已经用谷歌搜索了很多,但是我没有找到以下问题的明确答案:react-router中的hashHistory和browserHistory有什么区别? 问题答案: 基本区别在于hashHistory使用的URL类似于:http ://myurl.com/#page/another_page/another_page 使用BrowserHistory,您可以获得正常的网址(无哈希):ht

  • 我对反应和试图理解如何传递道具很陌生。 首先,我设置了一个Navlink组件,该组件包含子类别属性: ,,都是从json文件中获取的,所以这部分是可以的。 每条路线的定义如下: 所以它呈现一个名为

  • 我是React Router的新手,我正试图通过一条路径将一些道具从我的父组件传递给子组件。 这是我的代码: 理想情况下,我希望能够从子组件触发。在做了一些研究后,我认为传递一个选项而不是会传递它,但是它不会。知道如何将函数传递到路由组件中吗?

  • 当我在浏览器上运行我的应用程序时,我的控制台中出现以下错误。 警告:失败的propType:为“Route”提供的prop“component”无效。 我目前正在使用以下开发需求的版本 这就是我的路由文件的外观。 这就是我的主js的样子 请问这个错误是从哪里来的?我该如何解决这个问题?