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

【问题标题】：Reactjs - `component` vs `render` in RouteReactjs - 路线中的“组件”与“渲染”
【发布时间】：2018-12-16 00:35:01
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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 道具没有提供将额外道具传递给组件的真正方法。

【讨论】：