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

and have linking like this

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

*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

routing*/useMyHistory.ts*

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

• Goto routing/useAppRoutes.ts *replace 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:

• React Native Best way to keep clean code

• Generate SVG icons for React.Js Typescript