Problem with routing in react with params

Question

hey guys I am learning react as I'm trying to build a website, I am facing problem with the routing using params and without. I have these routes in index.js,

This is book's home

<Route exact path="/books/bookshome" component={BookList} />

and another route to fetch individual books

<Route exact path="/books/:slug" component={SingleBook} />

The problem is whenever I open the BookList, an api request will be send by the SingleBook component and that returns an error. How can I avoid that?

I tried checking a condition in useEffect in SingleBook but it doesn't seem to work.

if(slug !=="bookshome") { fetch }

Is there a way to solve this issue or should I change the url ?

Thanks

If they are in a Switch and the the /books/bookshome is on top, the other shouldn't ever be hit. Could you update your code to show a bit more detail? — Joe Lissner
– Joe Lissner, Commented Jan 29, 2021 at 18:30

Rahul · Accepted Answer · 2021-01-29 18:25:05Z

2

Keep the BookList route above the SingleBook route and remove exact from slug route:

<Route exact path="/books/bookshome" component={BookList} />
<Route path="/books/:slug" component={SingleBook} />

answered Jan 29, 2021 at 18:25

Rahul

4024 silver badges13 bronze badges

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

Comments

Pavan · Accepted Answer · 2021-01-29 18:25:58Z

1

Best practices to use /books is for BookList component and /books/:id or /books/:name which should resolve your problem too.

If you want keep urls as is then try putting BookList route above the Single Book route with exact param only for BookList route

I suggest to change the URLs and follow best practices.

answered Jan 29, 2021 at 18:25

Pavan

8587 silver badges18 bronze badges

Collectives™ on Stack Overflow

Problem with routing in react with params

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related