Reactjs-Route中的`component` vs`render`

Question

对于Route（ v4.3.1 ）中react-router-dom的使用，我有两个疑问：

1. 我们何时在component中使用render与Route：

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

2. 如何通过两种方式在 URL 中访问变量username？

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道具并没有提供将其他道具传递给组件的真正方法。