React Router is an npm package that enables you to construct dynamic routing in your web application, as Create React App(CRA) does not include page routing. This tutorial will walk you through changing your single-page application to another page, such as the one that registers new users.
Prerequisite
You should have a basic understanding of React and Javascript to fully comprehend this tutorial. If you don’t, start by looking here and here.
Make sure you have react-router-dom installed from the node package manager at nodejs.
Folder Organisation
Assume for the purpose of this tutorial that you have a folder called screens that contains javascript files with the names Home, Overview, Timeline, FAQ (Frequently Asked Questions), Register screen, and then a Navbar.
The screens are stacked on top of each other in App.js as a single-page application like this:
Assuming that you want to replace all of the screens with the register screen when a user clicks on the register button in the navbar of your web application. The trick is to arrange all of the pages to sit on one page to make up the main page. Then you wrap it with <Routes> </Routes> like this:
Your home page should look like this:
Finally, you go to your navbar.js to handle the logic of replacing the home screen with the register screen. Your navbar should look like this:
All of your screens should now be accessible from your navbar. You should also be able to replace your single-page application with the register screen when a user clicks on the register button.
Top comments (0)