How can I use different dynamic slug url for same component React js?

Question

I have common details view in my react app. Right now my detail view URL is like that

blog-details/:blogId

But I want to change the URL like this

host.com/{blog-title}/{blog-type}/{blog-id}

how can I do it? I'm using react-router and I want to use single details to view component with a different dynamic URL slug.

Provide an updated path="/:blogTitle/:blogType/:blogId" prop, something like this? Please include a Minimal, Complete, and Reproducible code example of your attempt. — Drew Reese
– Drew Reese, Commented Dec 7, 2020 at 9:08
@DrewReese it's going to be work cz every time the blog title and other things are different? — Ruturajsinh
– Ruturajsinh, Commented Dec 7, 2020 at 9:10
Work to change your code to handle the routes/paths you want it to? Your question is unclear. — Drew Reese
– Drew Reese, Commented Dec 7, 2020 at 9:24

b3hr4d · Accepted Answer · 2020-12-07 09:09:07Z

2

u can specify some route to a component like this :

 <Route
    exact
    path={[
      "/:title",
      "/:title/:type",
      "/:title/:type/:id",
    ]}
    component={Blog}
  />

answered Dec 7, 2020 at 9:09

b3hr4d

4,6381 gold badge13 silver badges24 bronze badges

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

4 Comments

how did you get that? do you have any docs?

How can we do that in react router v6 ? it doesnt accept array in Path property

You should make another question i think.