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 `` component linking to itself? — Amberlamps, Mar 07 '17 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, Mar 07 '17 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, Mar 07 '17 at 22:43
Does this answer your question? [Pass props in Link react-router](https://stackoverflow.com/questions/30115324/pass-props-in-link-react-router) — KFunk, Nov 05 '20 at 19:41

score 6 · Answer 1 · answered Mar 07 '17 at 22:44

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]];

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? — Mel, Jan 22 '20 at 21:36

score 0 · Accepted Answer · answered Mar 07 '17 at 22:47

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),
}

Muhammad Rooman · Answer 3 · 2022-02-07T01:12:21.633

**//Server Side Communicate with frontend. Product data....**
const products = [
  {
    img:"https://cdn-images-fishry.azureedge.net/product/Krunch-500x360-a6056d0-kfc.png/xs",
    title:"Kuranch burger",
    discription:"Enjoy the crispy chicken fillet in a soft bun with spicy mayo and our signature sauce with fresh lettuce.",
    price:210,
    slug:"EVERYDAY-VALUE",
  },
  {
    img:"https://cdn-images-fishry.azureedge.net/product/Krunch-500x360-a6056d0-kfc.png/xs",
    title:"Kurnach burger",
    discription:"Enjoy the crispy chicken fillet in a soft bun with spicy mayo and our signature sauce with fresh lettuce.",
    price:200,
    slug:"EVERYDAY-VALUE",
  },


  ]

//then

app.get("/products/:slug", function (req, resp) {
  const slugs = req.params.slug;
  const pro = products.filter(p=>p.slug==slugs) 
  resp.send(pro);
});

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

3 Answers3