ReactJS-在带有 React 路由器的 URL 中使用 slug 而不是 Id [英] ReactJS- Use slug instead of Id in the URL with React router

问题描述

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

In short: I want to show the slug instead of the Id in the URL, whats the best way to do that?

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

In my app.js component I am using React-router this way so far:

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

  </Router>

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

Then in my profile component I am using Link to go to that specific profile via the slug:

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

我想在我的配置文件缩减器或其他东西中将它们组合在一起?

I was thinking of keying them together in my profile reducer or something?

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

Any tips would be very helpful!

推荐答案

我会按照你设置路由的方式来做，然后当你使用 redux 时(因为你说你在编辑之前)我会使用 mapStateToProps 进行过滤，或者您将详细信息作为道具传递.

I would just do it with the way you have set up your route and then as you're using redux (because you said you were before edits) I would use mapStateToProps to filter or however it is you are passing the details as props.

对于示例:

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

这篇关于ReactJS-在带有 React 路由器的 URL 中使用 slug 而不是 Id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！