DEV Community

Akash Gupta
Akash Gupta

Posted on

How to Use React Router Dom as Pro

Routing is super important part of any SPA, without it you can’t navigate to another page.

Are you really managing it in a Best way?

Let’s suppose, we have more than 100 pages in React and have routing of each pages and one page may have linked to another page. we will write something like this

React Bad Routing Style

and have linking like this

React Bad linking

if we are managing it like above so the project code will gonna lose its cleanliness and richness very soon.

So what’s the best way to manage it?

*Define all Routes inside *routing/AppRoutes.ts


Use **AppRoutes **like this

Good Routing Style

*To make it more global and readable, create **routing/*useAppRoutes.ts

now we need pass Param taskId in TASK_DETAIL. **there can be easier way like this below but **i will not recommend it.

Let’s make it more cleaner by overriding useHistory hook

npm i urlcat — save



Finally we made it now it’s time to use it on our code.

  • Goto routing/useAppRoutes.ts *replace useHistory with useMyHistory*

replacement of useHistory with useMyHistory

Final Page Look Now

Here is **Git Example .**

Thanks for reading, I hope this gives you an idea of how to handle React Routing in cleaned and global way. Claps and shares are very much appreciated!

If you enjoyed reading this, you may also enjoy some of my other blogs:

Top comments (0)