What is React Router? React Router is a tool that allows us to handle routes in a web app, using dynamic routing. Dynamic routing takes place as the app is rendering on your machine, unlike the old routing architecture where the routing is handled in a configuration outside of a running app. React router implements a component-based approach to routing. It provides different routing components according to the needs of the application and platform. React Router is one of the very important component / feature that React has, and it should be one of the first thing that we get our hands on when we starting learning React. Let us dive deep into the world of React Router today.
First thing that we need to do is install react-router-dom. It is simply installed with the terminal command npm install react-router-dom . Once it is installed, we can start implementing react router in our app. One thing to note is that there are so many ways that we can setup our react router, and it is definitely not to say one way is better than another. For simple demonstration purpose, we are going to set up react router all in a single JavaScript file called app.js.
We can tell from the code snippet above that the first thing we need to do is import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; what this does is that it will let us use the following features/ components from react-router-dom: Router, Switch, Route. <Router >is exactly what it sounds like, it will be the outside wrap to our app in a router. Inside the router is <Switch>, another cool feature that react-router provides us with to help manipulate which page is our app going to, and finally we are setting up our routes with <Route>. Each of the route will take us to a different paths on our app. For example, ‘/search’ will take us to a <SearchPage /> on our app, while “/” is going to the home page of our app. One thing to note in our case is that we setup the <Route> from more specific paths such as “/search” to generic home page “/” with no specific paths behind it. This is a very important way to separate what react router will display in terms of how we arrange the paths. If we put “/” on top, react router will always loads the homepage even if we want to go to search page, because the path “/” matches all results before “/anythingPaths” in our app. This is one of the feature of <Switch>. Therefore to properly suit our usage, we can put “/” on the bottom of our routes to make sure that it would only go to home page if there is no specific paths that we entered. Another way to combat this feature is to use <Route exact path= “/”> this exact keyword will define what our paths will be if and only if we enter exactly like “/”. It actually means that we can put our homepage route on the top with exact path and our app will only loads to homepage when the path is exactly “/”.
One of the subtle feature that React Router Dom that a lot of people don’t notice is that it provides links to other pages in our app without refreshing the whole app. For example, if we want to go to “about” page on our app from the “home” page, if react router dom is setup properly, it won’t refresh our app when we go to our “about” page. As we can see from the following code snippet, import Link from react-router-dom will let us use the Link feature, and <Link to="/about">About</Link> will let us define where the link is heading to, and what is the text for the link. It is one of the cool feature that react provides to help us create a Single Page Application more efficiently and effectively!
One of the new feature that I encountered in a recent project is a private route. It is exactly what the name suggests, a private route for only accessed users to see. So how does it work? We can see from the code snippet below, it essentially is setup as a file structure of PrivateRoute.js and we define what PrivateRoute is with another function from another file to check if the user is logged in, if they are logged in, proceed to display the components; if not, then redirect user to sign-in page.
Once the PrivateRoute is completed, we can use it in our app like shown in the code snippet below. Simply by importing the PrviateRoute and we are able to give user the proper access to each Private path after the user sign-in. Note that PublicRoute can be also useful with a prop of restricted={true/false}. If restricted={false}, then the route is completely open to the public without any restriction.
There are a lot more cool features that react-router-dom provides, feel free to checkout the resources down below and the project that I built with react-router-dom recently. I would love to connect and chat with y’all through LinkedIn! Thanks for reading and have a wonderful day!
