React中如何从路由向组件传递Props？

我来帮你搞定这个路由传Props的问题！先拆解你代码里的核心问题，再一步步给你修正方案：

1. 先解决Home组件的Props接收错误 #

你的Home组件是函数组件，但代码里用了this.props.num——函数组件没有this，必须通过参数来接收Props，这是导致你拿不到num的直接原因。

给你两种正确的写法：

方式1：直接接收Props参数 #

import React from 'react'

const Home = (props) => (
  <div>
    <h1>Welcome to the Tornadoes Website!</h1>
    <p>{props.num}</p>
    <p>{props.someProp}</p> {/* 也可以展示你传递的someProp */}
  </div>
)

export default Home

方式2：解构赋值（更简洁） #

如果组件用到的Props不多，直接解构参数会让代码更清爽：

import React from 'react'

const Home = ({ num, someProp }) => (
  <div>
    <h1>Welcome to the Tornadoes Website!</h1>
    <p>{num}</p>
    <p>{someProp}</p>
  </div>
)

export default Home

修改后，你在Route的render里传递的num="2"和someProp={100}就能正常显示了。

2. 不同Route写法的Props传递技巧 #

你的代码里用了两种Route写法：render和component，它们传Props的方式略有不同：

用render属性传Props（你当前的写法） #

这种写法本身是正确的，直接在render回调里给组件传递自定义Props即可，比如你现在写的：

<Route exact path='/' render={()=> <Home num="2" someProp={100}/>} />

如果需要同时传递路由自带的Props（比如match、location、history），可以把回调的参数解构传入：

<Route exact path='/' render={(routeProps)=> <Home {...routeProps} num="2" someProp={100}/>} />

这样Home组件就能同时拿到路由相关的Props和你自定义的Props了。

用component属性传自定义Props #

如果你的Route用的是component属性（比如你的/roster路由），直接写<Route path='/roster' component={<Roster num="2"/>}/>是错误的——这会导致每次渲染都创建新的组件实例，引发不必要的重新挂载，影响性能。

正确的做法是改用render属性，或者用withRouter高阶组件（如果只需要路由自带的Props）。如果要传自定义Props，推荐用render：

<Route path='/roster' render={(routeProps) => <Roster {...routeProps} num="2" someProp={100} />} />

这样Roster组件既能拿到路由的Props，也能拿到你自定义的Props。

总结 #

• 函数组件必须通过参数接收Props，不能用this.props；类组件才需要用this.props。
• Route的render属性是传递自定义Props的安全方式，灵活且不会有性能问题。
• 如果用component属性，不要直接传组件实例，而是传组件引用，需要自定义Props时改用render。

内容的提问来源于stack exchange，提问作者asanas