+ 5

React page navigation/routing

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

2nd Jan 2021, 3:39 PM
Avinesh - avatar
4 Answers
+ 25
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??
2nd Jan 2021, 3:51 PM
Piyush - avatar
+ 6
Here an example of using react router to protect page with login https://code.sololearn.com/Wkr72RF2dNh1/?ref=app
6th Jan 2021, 11:02 AM
Calviղ - avatar
+ 2
Piyush thanks a lot for the answer.
2nd Jan 2021, 7:40 PM
Avinesh - avatar
+ 2
Calviղ Thanks a lot for sharing your code. That really helps.
6th Jan 2021, 11:22 AM
Avinesh - avatar