Having trouble grasping React Router?
React Router is a third-party library that allows for a React application to route webpages internally. It allows for a fluid transition between pages and doesn’t constantly rely on the server. React Router is currently on its 6th version which was released in September 2021. Building a reliable application in React requires understanding the basics of React Router.
Out with the old, in with the new
When using the previous method of managing web pages, a client had to send a request to the server each time they wanted to view a different page. This is referred to as a multi-page application (MPA). For example, when visiting a website for the first time, the client would make a request to the server for the homepage. Following that, the server would return an HTML page, let’s say “homepage.html,” and the machine would present that on the screen.
The client would have to make a new request to the server in order to access a different section, such as the about page, since it doesn’t have that HTML page.
This practice can easily be spotted when clicking on a link on a webpage and seeing a white flash as if the site is being reinitialized.
React opts for a more robust system called single-page application (SPA). All the files are loaded at once when a user initially accesses a React website. From that point on, the website does not have to render the entire HTML page again. The program merely swaps in the desired section and only does the necessary API requests for that area when the user navigates to a different page. This results in a quicker browsing experience on the web, and it is also extremely obvious. React Router’s use makes all of this feasible. The primary benefits of React Router are the ability to conditionally render substantial sections of a website, the creation of declarative APIs, and a huge selection of hooks.
Setting up React Router
1. Install the React Router dependency
2. Import BrowserRouter from react-router-dom in the file rendering the App component. It’s common practice to rename it to Router. Wrap the App component with Router
3. Import the Link component from react-router-dom inside the App component. The Link component acts exactly like an anchor tag, so we can write the name of the links; for this example we used “Home” and “About”. The component takes a prop called “to”, this will set the path to on the address bar; for example, “demoproject.com/” and “demoproject.com/about” for the home page and about page respectively.
3. Import the Link component from react-router-dom inside the App component. The Link component acts exactly like an anchor tag, so we can write the name of the links; for this example, we used “Home” and “About”. The component takes a prop called “to”, this will set the path on the address bar; for example, “demoproject.com/” and “demoproject.com/about” for the home page and about page respectively.
When then place the Home component and the About component for the element prop inside curly brackets.
This is just a glimpse into the world of React Router. For more information on React Router, take a look at the link below: