Question

我正在尝试设置类似的结构，其中/ profile会将您带到您的个人资料，并允许您编辑您的信息。 / profile /：userId会将您带到其他人的个人资料中，并允许您发送消息但不能编辑（显然）。我在想类似于这个逻辑的东西：

<Route path='profile'> 
  <IndexRoute component={requireAuth(Profile)} />
  <Route path=':userId' component={requireAuth(Profile)} />
</Route>

并在Profile组件中执行类似

的操作

if (this.props.params.userId !== this.props.currentUser.id) 
  <SendMessage toUser={this.props.params.userId} />

这很麻烦，因为对于页面上的每个元素都会进行大量的验证检查，无论是当前用户还是其他配置文件。有没有“正确”的方法来做到这一点？

Answer 1

是。您自己的配置文件页面（/ profile）和其他页面（/ profile /：userId）的组件应该是不同的组件（可能有类似的标记）。例如/ profile的组件不需要<SendMessage/>等。

<Route path='profile' onEnter={requireAuth}> 
  <IndexRoute component={ProfileSelfComponent} />
  <Route path=':userId' component={ProfileOtherComponent} />
</Route>

requireAuth将处理用户是否登录等。

您唯一想要的是当用户尝试导航到他自己的/ profile /：profileId时，它会路由回自己的个人资料

这可以通过向ProfileOtherComponent

添加类似的内容来完成

componentWillMount(){
    if (this.props.params.userId === this.props.currentUser.id) 
         browserHistory.push('/profile')
}

OKCupid，Reddit如何使用react路由器处理用户配置文件路由？

1 个答案: