为什么程序员在 React 路由中使用组件属性?

don*_*don 2 javascript routes reactjs

我现在正在学习react。我发现程序员在react中路由时通常会使用组件属性。因此,为了路由名为 Menu 的组件,他们编写如下代码

<Route exact path='/menu' component={ Menu } />
Run Code Online (Sandbox Code Playgroud)

而不是

<Route exact path='/menu'> <Menu /> </Route>
Run Code Online (Sandbox Code Playgroud)

props我认为第二种方式在给予组件时更方便Menu。所以我的问题是,作为第一种方式编写代码有什么好处?

谢谢。

Hai*_*jum 5

这一切都与用例有关。我们可以通过以下方式声明路由:

  1. 成分

    <Route to="/home" component={Home} />
    
    Run Code Online (Sandbox Code Playgroud)

    当不希望控制权将任何道具传递给组件时,可以通过这种方式添加路由,只需将组件对象作为道具传递给路由即可。

  2. 使成为

    <Route to="/home" render={props => <Home {...props} />} />
    
    Run Code Online (Sandbox Code Playgroud)

    当您希望拥有将任何道具传递给组件甚至更新现有组件道具的控制权时,可以通过这种方式添加路由。

  3. 孩子们

    <Route exact path='/home'> <Home/> </Route>
    
    Run Code Online (Sandbox Code Playgroud)

    这是将路由组件作为子组件传递给 Route 组件的另一种方法。您可以再次传递 props 或者将组件包装到另一个组件或某些 html 结构中。

选择一个解决方案只是开发人员的选择。如今,开发人员使用许多方法或框架来在 React 应用程序中引入路由。我个人喜欢第一个,因为它很干净,确保道具类型并对任何违规发出警告,而且我没有在路线级别传递的用例或道具。