Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When to use Navigation vs 'State based switching' between components and pages in a React application?

I'm new to React.

In React, we use navigation with a library like... 'react-router-dom' to navigate to pages. My question is most of the time, I can show and hide the entire Component based on the item selected in a navigation bar. I can store a value in the state and if the selection changes, I can show another component. Then why should we use a navigation library to navigate around?

I can not find any clear information about this online. Please help.

like image 789
AmanDeepSharma Avatar asked Nov 01 '25 06:11

AmanDeepSharma


1 Answers

I was writing in this answer about having a more organized code (easier to maintenance) and a better folder structure, but you could easily have it working without a navigation library.

Probably the main point to use a navigation library is, as said in React Router page, whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native.

Web

The library will help you work with the URL, receive parameters, navigate between pages.

Mobile

You can make use of deep linking, receive parameters, navigate between screens, animations, components ready for Stack navigation, Drawer navigation, Bottom Tab navigation...


You can do anything I mentioned above by yourself, but libraries exist because other people had a need and you decide to use it if you have the same need and think it's worth it.

Why should we use a navigation library to navigate around?

In short, because they are widely used, well-tested libraries, with a performance that you may not be able to achieve easily if you want to have many different functionalities like those libraries have. And they will certainly save you a lot of time in case you need to create a way to navigate and work with things related to navigation (like those mentioned about Web and Mobile).

If your project is simple, there is no need to use a navigation library. To have a more practical experience, you can even try to do your project without using such a library, and when you are having difficulties, try replacing your logic with some library and analyze if it was worth it.

like image 128
Rafael Tavares Avatar answered Nov 03 '25 09:11

Rafael Tavares