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
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 (
<Router>
<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>
</Router>
);
}
export default App;
Home.js
import React from ‘react’;
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
export default Home;
About.js
import React from ‘react’;
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
export default About;
Dashboard.js
import React from ‘react’;
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
</div>
);
}
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.
The match object contains information about how a component inside Route matches the URL, it is formed by 4 keys:
<Route path=”/users/:id”>
<Users />
</Route>
path=”/users/:id”
and our URL for user number 1 would be:
URL=”/users/1”
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.
One use for this is to check if the name of a path has changed for example
componentDidUpdate(prevProps, prevState, snapshot){
if (prevProps.location.pathname !== this.props.location.pathname){
//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 :
const location = {
pathname: ‘/about’,
state: { fromDashboard: true }
}
<Link to={location}>About</Link>
A history object allows you to manage and handle the browser history inside the views or components. It usually contains the following:
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:
const handleLogout = history => () => {
//perform action for logging out and aftewards we use:
history.push('/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!