Reactjs - 路线中的“组件”与“渲染”

Posted 2023-02-22

【中文标题】Reactjs - 路线中的“组件”与“渲染”

【英文标题】：Reactjs - `component` vs `render` in Route

【发布时间】：2018-12-16 00:35:01

【问题描述】：

我对@9​​87654322@(v4.3.1)中Route的用法有两个疑问：

我们什么时候在Route 中使用component 和render：

<Route exact path='/u/:username/' component=ProfileComponent />
<Route exact path='/u/:username/' render=() => <ProfileComponent /> />

如何通过两种方式访问​​URL中的变量username？

【参考方案1】：

当您将组件传递给component 属性时，该组件将获取props.match.params 对象中的路径参数，即您的示例中的props.match.params.username：

class ProfileComponent extends React.Component 
  render() 
    return <div>this.props.match.params.username</div>;
  

使用render props时，可以通过render函数赋予的props访问路径参数：

<Route
  exact
  path='/u/:username/'
  render=(props) => 
    <ProfileComponent username=props.match.params.username/>
  
/>

当您需要来自包含您的路由的组件的一些数据时，您通常使用 render 道具，因为 component 道具没有提供将额外道具传递给组件的真正方法。

【讨论】：

最后一句话是所有其他解释都忽略的关键部分。谢谢！