Reactjs - `component` vs `render` в Route

Question

У меня есть два сомнения относительно использования Route от react-router-dom(v4.3.1):

1. Когда мы используем component против render в Route:

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

2. Как получить доступ к переменной username в URL в обоих направлениях?

Answer 1

Когда вы передаете компонент в component prop, компонент получит параметры пути в props.match.params объект, т.е. props.match.params.username в вашем примере:

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

При использовании render prop, параметры пути могут быть доступны через реквизиты, данные render функция:

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

Вы обычно используете render поддержать, когда вам нужны данные из компонента, который содержит ваши маршруты, так как component prop не дает реального способа передачи дополнительных реквизитов компоненту.