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

Posted 2023-02-21

【中文标题】ReactJS- 在带有 React 路由器的 URL 中使用 slug 而不是 Id

【英文标题】：ReactJS- Use slug instead of Id in the URL with React router

【发布时间】：2017-07-28 07:53:44

【问题描述】：

简而言之：我想在 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 中将它们组合在一起吗？

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

【问题讨论】：

为什么要绑定id和slug？那有什么意思？为什么你有一个链接到自身的<Link /> 组件？

您的问题与 Redux 无关——如果您想了解有关 react-router 的答案，我建议您添加正确的标签并删除与您的问题无关的标签。

很抱歉，如果它具有误导性，我已经编辑所以应该会更好。但是你通常如何在反应中做到这一点，在 Url 中显示 slug 或用户名而不是 id？ :)

这能回答你的问题吗？ Pass props in Link react-router

【参考方案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]];

【讨论】：

我理解这其中的逻辑。如果在路由 url 中显示用户 ID 是不安全的 - 这是克服它的标准方法还是有更新的约定？

【参考方案2】：

我会按照您设置路线的方式进行操作，然后在您使用 redux 时（因为您说您在编辑之前）我会使用 mapStateToProps 进行过滤，或者您正在传递细节作为道具。

对于示例：

const mapStateToProps = (state, ownProps) => 
  user: state.users.items.filter(user => user.slug === ownProps.params.slug),