ReactJS- Use slug instead of Id in the URL with React router

Question

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

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>

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!

Why do you have to bind the id with the slug? What does that even mean? And why do you have a <Link /> component linking to itself? — Amberlamps
– Amberlamps, Commented Mar 7, 2017 at 22:35
Your question isn't about Redux - if you want answers about react-router I would recommend adding the correct tags and removing those that are irrelevant to your question. — Jon Koops
– Jon Koops, Commented Mar 7, 2017 at 22:37
Sorry if it was misleading, I have edited so it should be better. But how do you normally do this in react, showing the slug or the username in Url instead of the id? :) — DbTheChain
– DbTheChain, Commented Mar 7, 2017 at 22:43
Does this answer your question? Pass props in Link react-router — KFunk
– KFunk, Commented Nov 5, 2020 at 19:41

Alex Young · Accepted Answer · 2017-03-07 22:44:55Z

6

The best way I have found to do this is to have two objects within your state, one is users keyed by user id, the other is a slug-id lookup, keyed by slug. Say your users look like this:

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

Then your state would look like:

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

Now when you are rendering Link components, you use:

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

And to select the user when you have the slug, you would have a selector such as:

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

answered Mar 7, 2017 at 22:44

Alex Young

4,0391 gold badge19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mel Over a year ago

I understand the logic to this. If it's unsafe to show the user id in the route url - is this a standard way to overcome that or is there a newer convention?

patrick · Accepted Answer · 2017-03-07 22:47:03Z

0

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.

for example:

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

answered Mar 7, 2017 at 22:47

patrick

10.3k4 gold badges23 silver badges27 bronze badges

Collectives™ on Stack Overflow

ReactJS- Use slug instead of Id in the URL with React router

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related