Визуализация компонента на основе параметра в пути

Question

Для моего проекта я хочу отобразить страницу пользователя по адресу url.com/username. Если имя пользователя, вошедшего в систему, совпадает с параметром, то оно отобразит страницу своего профиля.Так что в моем маршрутизаторе у меня есть этот маршрут ...

<Route path="/:username" exact component={/* Profile or User's Page */}>

У меня есть другие маршруты, где компоненты являются условными, и я использую троичный в компоненте, однако в этом случае он будет основан на: usernameпараметр.Есть ли способ получить доступ к этому значению в теге компонента?Или у меня должен быть какой-то HOC в теге компонента, где я могу сравнить параметр: username с аутентифицированным именем пользователя и затем вернуть компонент Profile или UserPage?

Answer 1

Вы можете получить доступ к параметрам URL, используя компонент prop match.params.:param

<Route
  path="/:username"
  component={Component}
/>

const Component = ({ match }) => (
  <div>
    <h3>{match.params.username}</h3>
  </div>
);

Если вы хотите получить доступ к параметру внутри параметра component, вы можете, например, использовать анонимный компонент (или простоиметь компонент, особенно для определения того, какой подкомпонент будет использоваться).

<Route path="/:username" 
       component={({match} => {
         if(match.params.username == this.props.username) {
           return <SomeComponent />
         } else ...
       })} 
/>