React nested routes issue

Question

I have a couple of routes setup using Route from react-router-dom.

<Route exact path="/dashboard/search" component={Search} />

<Route exact path="/dashboard/search/:uid/:sid/result" component={Results} />

Problem

The second route mentioned above is something I send to an email as a link. When I click that link. It opens up the link with url as expected but doesn't stay there and takes to the first route. Simply put.

2nd route url shows up in address bar.
Then switches to first route.

As you can see I do have exact prop setup on this. Shouldn't they be differentiated? What could be the problem?

as i see your routes, nothing is going wrong with deceleration of the routes. you need to check the internal logic of the component, its redirecting from the internal logic of the component or container. — Muhammad Ateek
– Muhammad Ateek, Commented Apr 3, 2019 at 6:42
it would help if you give some more piece of code , wants to see whats going inside the code. — Muhammad Ateek
– Muhammad Ateek, Commented Apr 3, 2019 at 6:44
@MuhammadAteek. Thanks much for your response. I am cross checking it. I'll post it shortly. — Nauman Zafar
– Nauman Zafar, Commented Apr 3, 2019 at 6:50
@MuhammadAteek, Actually I do have a button within app. On click that page works perfectly fine. — Nauman Zafar
– Nauman Zafar, Commented Apr 3, 2019 at 6:59

Rana · Accepted Answer · 2019-04-03 06:45:40Z

2

This code will help you

<Route path="/Product" name="Product" >
    <IndexRoute component={Product} />
    <Route path="add" name="Add product" component={AddProduct} />
    <Route path="edit/:id" name="Edit product" component={AddProduct} />
    <Redirect from="edit" to="/product" />
    <Route path="detail/:id" name="Detail" component={DetailProduct} />
    <Redirect from="edit" to="/product" /></Route>

answered Apr 3, 2019 at 6:45

Rana

1265 bronze badges

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

1 Comment

Muhammad Ateek Over a year ago

This is the proper way to declare nested routes in react. if your component also have nested templates

Muhammad Ateek · Accepted Answer · 2019-04-05 05:35:24Z

0

It will help you, you need to setup node server which will return main page of the application on every request.

React-router urls don't work when refreshing or writing manually

answered Apr 5, 2019 at 5:35

Muhammad Ateek

1,0573 gold badges15 silver badges24 bronze badges

Collectives™ on Stack Overflow

React nested routes issue

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related