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 npx create-react-app 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 React ‘react’; { BrowserRouter Router, Switch, Route, Link } “react-router-dom”; Home ‘./Home’; Dashboard ‘./Dashboard’; About ‘./About’; { ( <div> <ul> <li> <Link to=”/”>Home</Link> </li> <li> <Link to=”/about”>About</Link> </li> <li> <Link to=”/dashboard”>Dashboard</Link> </li> </ul> <hr /> <Switch> <Route exact path=”/”> <Home /> </Route> <Route path=”/about”> <About /> </Route> <Route path=”/dashboard”> <Dashboard /> </Route> </Switch> </div> ); } App; import from import as from import from import from import from ( ) function App return < > Router </ > Router export default Home.js React ‘react’; { ( <h2>Home</h2> ); } Home; import from ( ) function Home return < > div </ > div export default About.js React ‘react’; { ( <h2>About</h2> ); } About; import from ( ) function About return < > div </ > div export default Dashboard.js React ‘react’; { ( <h2>Dashboard</h2> ); } Dashboard; import from ( ) function Dashboard return < > div </ > div export default If you are using 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. Chrome 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 about how a component inside Route matches the URL, it is formed by 4 keys: information 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. <Route path=”/users/:id”> < /> Users </ > Route 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: path=”/users/:id” and our URL for user number 1 would be: URL=”/users/ ” 1 Location The location object brings information about where the is now, where you want it to go, and where it was. app 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. One use for this is to check if the name of a path has changed for example componentDidUpdate(prevProps, prevState, snapshot){ (prevProps.location.pathname !== .props.location.pathname){ } } if this //Do something You can also use locations instead of strings to the various places that navigate: In our example, we can change <Link to=”/about”>About< /Link> to : location = { : ‘/about’, : { : } } <Link to={location}>About< const pathname state fromDashboard true /Link> History A history object allows you to manage and handle the browser history inside the views or components. It usually contains the following: length: is the number of entries in the history stack. action: The current action performing. it says how you got to the component. (push, replace or pop). location: The current location, it can have the properties: pathname, search, hash, and state. Remember it is mutable. push(path, [state]): (function), pushes a new entry onto the history stack. replace(path, [state]): (function), replaces the current entry on the history stack. o(n): (function), moves the pointer in the history stack by n entries. goBack(): (function), equivalent to go(-1). It lets us go back to the previous screen in the navigator. goForward(): (function,) equivalent to go(1). block(prompt): (function), prevents navigation. One common example to use history is when we want to redirect to a component after an action executes. In this case, you cannot use Link, so history.push() comes handy. For example, you can redirect a user after logging out to the main page of your App the following way: handleLogout = () => { history.push( ); }; const => history //perform action for logging out and aftewards we use: '/main' Also, you can use history.replace( ) "/my-path" which would be the equivalent of : <Redirect to= /> "/my-path" I hope you like it and found this useful! Happy coding!
