Reactjs

Question

我对 react-router-dom(v4.3.1) 中 Route 的用法有两个疑问：

我们什么时候在Route中使用component vs render:

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

Answer 1

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

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

当使用 render 属性时，可以通过给 render 函数的属性访问路径参数：

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

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

Reactjs - 路由中的`component` 与`render`