Beginners Guider To React Router

Beginners Guider To React Router hackernoon.com2 years ago in #Dev Love37

Today I decided to write about the props history, match, and location that are included in each component that uses React Router. But first, to start warming up here is a simple definition of React Router: React Router is the standard routing library for React using dynamic routes, which means that the routing takes place whenever React is rendering. How it works After using for creating my app, and install react-router-dom with npm install react-router-dom I was able to create the following components with their corresponding routes with the help of this incredible source: App.js import React from ‘react’; import { BrowserRouter as Router, Switch, Route, Link } from “react-router-dom”; import Home from ‘./Home’; import Dashboard from ‘./Dashboard’; import About from ‘./About’; function App() { return ( Home About Dashboard ); } export default App; Home.js import React from ‘react’; function Home() { return ( Home ); } export default Home; About.js import React from ‘react’; function About() { return ( About ); } export default About; Dashboard.js import React from ‘react’; function Dashboard() { return ( Dashboard ); } export default Dashboard; If you are using Chrome and you have the extension React Developer Tools (if you don’t have it, go for it, I promise you it would be worth it), you can see all the props that our components are receiving, including 3 named: Match, Location, and History. You may wonder where do these props come from and how can they be useful. In this article, we are gonna talk a little bit about this. Match The match object contains information about how a component inside Route matches the URL, it is formed by 4 keys: isExact: (true/false): it will return true if the entire URL was matched. For example, if we remove the word “exact” in the Home component because path=”/” it will display always, regarding the route, being the isExact value “false”. params: key/value pairs parsed from the URL corresponding to the path. One common use for it is when we want to use URL parameters to render the same component based on its URL, for example, a Users component in which every user as a particular id 1,2,3. We use params to store the value of that id. path: the path we wrote to match. To render the component About we used the path ‘/about’ URL: the matched portion of the URL. Sometimes it would be different than the path, for example, if we are using URL parameters our path would be: and our URL for user number 1 would be: Location The location object brings information about where the app is now, where you want it to go, and where it was. If we saw our React Developer Tools again, you can see there are two locations object: One inside history, and one that stands separate. Even though they look the same, you shouldn’t use the one inside history, because it is mutable. and the one alone is not, meaning you can use it in the lifecycle hooks to determine when navigation happens. This is useful for data fetching or DOM side effects.  » Read More

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply