React-router-dom— The essentials
In real life, routing informs us where we currently are and shows us the path to where we want to go. In the same way, when it comes it react, react-router helps us to know which component is currently rendered, and which would render when we change pages. React itself doesn’t come with an inbuilt router, therefore a need for a separate library. No wonder it is one of the most popular react libraries.
As we learn by doing, you don't have to understand all the terms explained in the documentation to jump-start your way into react-router. This article is to give you a clear understanding of the essentials you need to get started with react-router-dom in your react application, by highlighting the key components and the key hooks. However, for an in-depth explanation, you may want to consider reading the documentation.
Note that this article is keeping in mind the v6 of react-router-dom so there may be some features highlighted here that won’t be available in an older version.
React-router vs React-router-dom vs React-router-native
When starting with react-router, you would come across these different packages and it can be a bit confusing to grasp. Here is a simple overview of what these are and what each package solves.
react-router contains all the standard components between react-router-dom and react-router-native. When should you use one over the other? If you’re on the web then react-router-dom should have everything you need as it also exports the common components you’ll need. If you’re using React Native, react-router-native should have everything you need for the same reason.
Installation
Key Components
BrowserRouter
This is the component that informs react-router to be aware and in control of your application. All you have to do is wrap your whole application around it and you are good to go. So inside our root component, usually index.js, import BrowserRouter (which some people like to rename as Router but we would keep it as is)
Route
Put simply, Route allows you to map your app’s location to different React components. For example, say we wanted to render a About component whenever a user navigated to the /dashboard path. To do so, we’d render a Route that looked like what we have below. Go ahead and import Route from react-router-dom.
The Rout component accepts an element prop which is the component that should be rendered when the route change and a path prop which is the URL to the component we have made available in the element.
Routes
Routes is the parent component that you wrap around two or more Route components
Link
When you want a text to link have a link to any route component, use the Link component available in react-router-dom. This accepts a to prop which is the URL to the component you are linking to. Say we want to link our nav items to their corresponding pages, our code will look like the below:
You can also pass data through a Link component to a new route using Link’s state prop. Example:
Anytime you pass data along via the state prop, that data will be available on the location’s state property, which you can get access to by using the custom useLocation Hook that comes with React Router which we will explore later.
Url Parameters
Just like you pass parameters to functions to dynamically set the value when called, URL parameters allow you to declare placeholders for portions of a URL. These parameters can be set to be used as states in the components.
The way you tell React Router that a certain portion of the URL is a URL parameter is by using a : in the Route’s path prop.
404 pages
To catch pages that are not defined in our routes, we can simply do that by providing our Route with a path of * and the element we pass in this route will be rendered when none of the routes that have been passed match.
Key Hooks
useNavigate vs useHistory
In the previous version of react-router, we had the useHistory hook which came in handy by returning to us some properties like goBack which when called lets the user go to their previous page, locationwhich is an object itself and had properties like pathname which helped us know the current path of the user, search and so on. Another property from the useHistory hook worth highlighting is, push which lets us navigate the user to any path we specified in the push function and that was great.
In v6, react-router-dom comes with the useNavigate instead which is whatever useHistory does and more.
Just like any other hook, our hook is declared at the top and inside our handleClick, we are passing a URL that will navigate to the home page.
A unique feature that useNavigate comes with is that, when you pass -1 into the navigate() function, it takes the user back to the previous page and passing 1 in the navigate takes the user to the next page.
useLocation
As explained earlier, useHistory had a location object that contained key items that described the user’s location. In the v6, accessing location data is a hook on its own and it looks pretty similar to the one in useHistory. The location property includes:
- hash: the anchor part (#)
- pathname: the pathname
- search: the query string part
- state: data passed from the Link
- key
Conclusion
To get up and running with react-router, these points that have been briefly highlighted is great. React router is such a huge topic and seeing how almost all react applications are dependent on it, taking a deep look into it will speed up your dev time. I hope you found this helpful.
