Реагировать не могу получить доступ к моему параметру URL (?) Через Match

Question

Моя функция рендеринга содержит только мой маршрутизатор:

return (
    <Router>
        <Switch>
            <Route exact path='/' render={LandingPageComponent} />
            <Route exact path='/signup' render={SignUpPageComponent}/>
            <Route exact path='/login' render={LogInPageComponent} />
            <Route path='/profile/:username' render={ProfilePageComponent}/>

            <Route render={ LandingPageComponent }/>
        </Switch>
    </Router>
)

В настоящее время я работаю над профилями пользователей и по какой-то причине не могу получить доступ к :username по маршруту профиля: /profile/:username.

Я видел, что правильный метод для получения переменной был бы: this.props.match.params.username, но я получаю ошибку: Cannot read property 'params' of undefined, когда я его консолью .log изнутри ProfilePageComponent

Iможно легко получить имя пользователя, выделив его из URL-адреса вручную, но я не думаю, что мне следует делать это таким образом.

Кто-нибудь знает, почему это происходит?Застрял на этом весь день.

РЕДАКТИРОВАТЬ

Так что я думаю, я знаю, почему это происходит сейчас, возможно, благодаря ответу ДжоКо.

Как вы можете видеть из приведенного выше примера кода, я отрисовываю переменную.

Переменные выглядят примерно так:

const LandingPageComponent = () => {
  return (
    <LandingPage 
      user: this.state.user
      ...etc
    />
  )
}

...
<Route exact path='/' render={ LandingPageComponent } />

Я делаю это таким образом, чтобы моя функция рендеринга многоаккуратнее.

Полагаю, возможно, поскольку я не выполнял непосредственный рендеринг компонента, реквизиты маршрута не передавались, поэтому мне нужно было вручную передать его в компонент.

Я мог бы бытьсовершенно неправильно, хотя.

Answer 1

Если вы хотите иметь возможность доступа к совпадению из RouteProps, вам нужно предоставить его вашему компоненту, передав его.

return (
<Router>
    <Switch>
        <Route exact path='/' render={LandingPageComponent} />
        <Route exact path='/signup' render={SignUpPageComponent}/>
        <Route exact path='/login' render={LogInPageComponent} />
        <Route path='/profile/:username' render={(routeProps) => <ProfilePageComponent {...routeProps} />}/>

        <Route render={ LandingPageComponent }/>
    </Switch>
</Router>

)