Same route path with different component in React

Question

I need a View component and an Edit component. Depends on conditions, a button needs to go View page or Edit page.

I set a Route like below. The problem is the paths are the same.

<Route exact path='/users/:user_id' component={Users.Edit} />
<Route exact path='/users/:user_id' component={Users.View} />

In page, I have links like below

(type = "A") ? <Link to="users/1">view</Link> : <Link to="users/1">edit</Link>

For now, the router has same path so the button goes to the Edit component.

Is there any good react way I can call Edit component or View component? or Do I need to just like below?

<Route exact path='/users/:user_id' component={Users.Edit} />
<Route exact path='/users/:user_id/view' component={Users.View} />

Why do you set up Routes if you don't actually need routes? URL doesn't change, so why use routes? You can just have a state variable that points to either View or Edit, and render your component based on that. — Al.G.
– Al.G., Commented May 6, 2018 at 9:01
You could just toggle the view i.e conditionally render instead of using Routes — Shubham Khatri
– Shubham Khatri, Commented May 6, 2018 at 9:02

Sasha Kos · Accepted Answer · 2023-06-13 18:39:47Z

1

I think this looks ok

<Route exact path='/users/:user_id' component={Users.Edit} />
<Route exact path='/users/:user_id/view' component={Users.View} />

But usual practice for CRUD to define routes in this way

<Route exact path='/users/' component={Users.List} />
<Route exact path='/users/create' component={Users.Create} />
<Route exact path='/users/:user_id' component={Users.View} />
<Route exact path='/users/edit/:user_id' component={Users.Edit} />

edited Jun 13, 2023 at 18:39

answered May 6, 2018 at 9:12

Sasha Kos

2,6182 gold badges26 silver badges41 bronze badges

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

1 Comment

Javier García Over a year ago

So, at the end of the day, which would be the better way to go?

Leroy · Accepted Answer · 2018-05-06 09:06:03Z

You should do it like you suggest with the /view suffix, but I would suggest combining the /users/:user_id with the Users.View component, and the /users/:user_id/edit with the Users.Edit component.

The reason 1 exact url cannot be handled based on conditions is when you open that url from let's say an e-mail, there is no way of telling which component to render.

There is a way, but it's harder than adding just 2 routes.

You might want to change the view/edit decision to a query param on 1 route, but then you have to create a new wrapper component around Users.Edit and Users.View to handle the decision based on the query param. So your route should look like

<Route exact path='/users/:user_id' component={Users.EditOrViewDecision} />

Next you can create links to that route by passing search to the Link

<Link to={{
  pathname: '/users/1',
  search: '?view=edit'
}}/>

But this way you still have to manage your decision in the EditOrViewDecision based on the ?view=edit query which component you want to display.

Collectives™ on Stack Overflow

Same route path with different component in React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related