Reactjs - 路径中的`component` vs`grave`

Question

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

1. 我们什么时候在Route使用component vs render ：

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

2. 如何以两种方式访问URL中的变量username ？

Answer 1

将组件传递给component prop时，组件将获取props.match.params对象中的路径参数，即props.match.params.username中的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道具没有提供将额外道具传递给component真实方法。