Using withRouter & Dynamic Routing

withRouter

React Router has a higher-order component called withRouter. This allows us to pass in the React Router’s history, location, and match objects to our React components as props. Simply put, withRouter connects our component to the router. To use withRouter, we must complete two steps. First, at the top of our App file we import { withRouter } from “react-router”. Second, we wrap our App component inside withRouter() as a parameter. See the examples below for implementation of withRouter.

Import line of code for withRouter at top of file:

import { withRouter } from "react-router";

Current export line of code at bottom of file:

export default App;

Export line of code at bottom of file with implementation of withRouter:

export default withRouter(App);

Following this implementation correctly will supply our App component with access to three props: history, location, and match.

History

The history library lets us easily manage session history. A history object provides a minimal API that allows us to manage the history stack, navigate, and persist state between sessions. History objects typically have access to many properties and methods such as: length, action, location, push(path, [state]), replace(path, [state]), go(n), goBack(), goForward(), block(prompt). The history object is mutable so when we need to access location, do so from <Route>’s props instead of history.location.

Location

Location relates to where the app is, where you want it to go, and where it was. Location objects are provided to us in a few places by the router. They are provided to us in the following: Route component - as this.props.location, Route render - as ({ location }) => (), Route children - as ({ location }) => (), withRouter - as this.props.location. The location object can also be found on history.location, but as mentioned earlier do not use this as it is mutable. Location objects are never mutated so we can use them in lifecycle hooks to determine when navigation happens as well as data fetching and animation. Additionally, we can pass a location to Route components and Switch components. This will prevent the components from using the actual location in the router’s state.

Match

Match objects contain information about how a <Route path> matched the URL and contain the following list of properties: params, isExact, path, url. We are provided access to match objects in the following places: Route component - as this.props.match, Route render - as ({ match }) => (), Route children - as ({ match }) => (), withRouter - as this.props.match, matchPath - as the return value, useRouteMatch - as the return value. If a route does not have a path we will get the closest parent match (same as withRouter). A <Route> that uses the children prop will call its children function even when the route’s path does not match the current location which means match will be null. The default way to resolve URLs is to join the match.url string to the relative path. Pathless <Route>’s inherit their match object from their parent. If their parent match is null, then their match will also be null.

matchPath

matchPath lets you use the same matching code that <Route> uses except outside of the normal render cycle. matchPath takes in two arguments, pathname and props. The pathname argument is set to the pathname we want to match. The props argument is set to the props we want to match against. These props are usually identical to the matching props Route accepts, but could also be a string or an array of strings. matchPath returns an object when the provided pathname does match the path prop, and will return null if it does not match.

Dynamic Routing

In dynamic routing, routes are initialized dynamically as the page gets rendered - meaning almost everything is a component in the React Router. Dynamic routing allows us to render separate components on the same page based on whatever conditions we like. For example, we can use route changes as the conditions and render components without changing the layouts or pages completely. Nested routing is not unique to dynamic routing, but with dynamic routing we can easily configure nested routing in our apps. Using nested routes provides access to routes such as “/example/:id”. This can be used to show one specific item from a list of many items.

Conclusion

Hopefully this article has highlighted some new and important knowledge of using withRouter and Dynamic Routing. Routing can start off simple and lead to complex routes that may be difficult to figure out. It is extremely useful knowing how to use withRouter to your advantage, as well as using Dynamic Routing to easily set up nested routes. Happy coding and thank you for reading!