Question

对于我的项目，我想在url.com/username呈现用户页面。如果登录用户的用户名与参数匹配，那么它将呈现他们的个人资料页面。所以在我的路由器中我有这条路线......

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

我有其他路由，组件是有条件的，我在组件中使用三元组，但在这种情况下，它将基于：username参数。有没有办法在组件标签中访问该值？或者我应该在组件标记中有某种HOC，我可以将：username参数与经过身份验证的用户名进行比较，然后返回Profile或UserPage组件？

Answer 1

您可以使用组件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 ...
       })} 
/>

基于路径中的参数渲染组件

1 个答案: