React Router
Introduction to React Router
React router is most used open source client-side routing library. It is responsible for synchronizing user-interface(UI) with the specific URLs across a single-page application(SPA). Especially, as a user interacts with the application, react router allows to quickly navigate through different pages and display contents of each page. To understand more about React Router, first we need to know how client-side routing works.
Client-Side Routing
Client-side routing is a crucial feature to SPA. With client-side routing we can separate components into different pages in the app with its own unique URL. Usually adding pathname with forward slash after the base URL. For example, “http://localhost:3000" (base URL) + “/home” (pathname). In other words, client-side routing handles all under-the-hood logic with JavaScript without making any additional request to the server. Major benefit to this is speed. As a result, a user does not have to wait for a page to load every time, instead it will display the page almost instantly. This is possible, because all of the initial data (i.e. HTML, CSS, JavaScript) are stored in client-side already when the app first loads. Therefore, when the user interacts to view different page, it only needs to display the contents of that page. This is perfect for instant gratification society, where consumers demand fulfillment without and delay.
However, there are couple limitations for client-side routing. First limitation is, if we have a huge application with many CSS and JavaScript, it might take a while to load the initial page. Secondly, it is harder to track page views. But this can be compensated with other scripts to handle it. Besides all limitations and benefits of client-side routing. Now let’s dive deeper into React Router and how it actually works.
React Router
Alongside with many great features that comes with react router, there are two main features that we are going to focus on. At the main core, react router is responsible for conditionally rendering components depending on its URL. For example, if URL is /login, then the react router is responsible for displaying <Login> component. Additionally, react router programmatically navigate through different pages of components using JavaScript. To elaborate more, when the user clicks on Home link, the URL changes to /home and the content is updated without making a new HTML request.
To use react router we need to install it. Simply write in your terminal.:
$ npm install react-router-dom
Then we have to import it on top of the component.
We are importing Browser Router as Router, also importing Routes and Route. Routes is similar to Switch as in v5.
Browser Router
Browser Router component is the base of routing in applications. It usually wraps around the entire app’s components, declaring within the Brower Router, we can use routing components including routes and route components. In other words, Brower Router stores base URL of application and allows to navigate to other pages of the app with Routes and Route.
Routes
Routes wrap around each Route, allowing to switch between Route. Within Routes we can easily navigate through different Route.
Route
Route is the conditional rendering of components. Route has path and element. Path allows to navigate to a page with specific pathname after forward slash. Element renders component of a page. It is similar to if statement concept. For example, if the path = /signup, then return <Signup> component.
Conclusion
React router is a powerful tool when it comes to building a SPA. It allows user to navigate through the app, easy and quick. Two main features of react router are conditional rendering and programmatic navigation. This is possible because client-side routing stores all the data at the initial load of the app which then re-directs to a page as user clicks on the link. We can declare path and which component to load with <Route> and <Routes>.
This was very basic explanation of how React Router works. For more detailed information, you can visit React Router website.
Happy Coding!