React page navigation/routing

Question

So I have been learning react for a past couple of weeks and now I have a situation where I have a login page and after logging in I move to another page. So I would like to know whether I need to learn react-router or is there a simple workaround.

Also if someone has already done this and share a piece of code for reference, I would be really grateful. Any relevant piece of advice is appreciated.

Thanks

Answer 1

Avinesh
React (CRA) generates single pages. There's no "other page" I guess..
React-Router enables client-side routing. It gives the feeling of routing on the client side, but in reality it's just mounting and unmounting stuff.
you could just have an if condition if the user is logged in, if not render <LoginPage> else (logged in), render <MainPage> but learning a library is always recommended as they have much more potential than just some workaround.
your router will handle this with navigation guards.you can also create your own solution by using template conditionals and updating the URL location in place

Yes. You should learn React-Router.

Dont avoid learning router, it's one of the major components that react (or any SPA) offers

Edit: anything else??

Answer 2

Here an example of using react router to protect page with login

https://code.sololearn.com/Wkr72RF2dNh1/?ref=app

Answer 3

Piyush thanks a lot for the answer.

Answer 4

Calviղ Thanks a lot for sharing your code. That really helps.