javascript - ReactJS - 在带有 React 路由器的 URL 中使用 slug 而不是 Id

Question

简而言之:我想在 URL 中显示 slug 而不是 Id，最好的方法是什么？

到目前为止，在我的 app.js 组件中，我以这种方式使用 React-router:

 <Router history={browserHistory}>
    <Route path="/" component={Main}>
      <IndexRoute component={Home}></IndexRoute>
        <Route path="/profile/:slug" component={Split}></Route>
    </Route>

  </Router>

然后在我的配置文件组件中，我使用链接通过 slug 转到该特定配置文件:

<Link to={'/profile/' + username.slug}>{username}</Link>

我在考虑在我的 profile reducer 或其他东西中将它们组合在一起？

任何提示都会非常有帮助!

Answer 1

我发现执行此操作的最佳方法是在您的状态中有两个对象，一个是由用户 ID 键入的用户，另一个是 slug-id 查找，由 slug 键入。假设您的用户看起来像这样:

{
    _id: 1234
    username: 'Mary Poppins',
    slug: 'mary-poppins',
    likes: [ 'umbrellas' ]
}

那么你的状态会是这样的:

{
    users: {
        1234: {
            username: 'Mary Poppins',
            slug: 'mary-poppins',
            likes: ['umbrellas']
        }
    },
    slugs: {
        'mary-poppins': 1234
    }
}

现在，当您渲染 Link 组件时，您使用:

<Link to=`/profile/${user.slug}`>{user.username}</Link>

要在有 slug 时选择用户，您将有一个选择器，例如:

const user = ( slug ) => ( state ) => state.users[state.slugs[slug]];