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内部进行console.log记录时，我得到了一个错误：ProfilePageComponent

我可以通过手动将用户名从URL拼接出来来轻松获得用户名，但我认为我不应该这样做。

有人知道为什么会这样吗？整整一天都被困在上面。

编辑

所以我相信我知道为什么现在正在发生，也许要感谢JoeCo的回答。

从上面的代码示例中可以看到，我正在渲染一个变量。

变量看起来像这样：

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>

）

React无法通过Match

1 个答案: