React

withRouter – A very simple way to use withRouter effectively

withRouter

What is withRouter used for? Consider when you need to find your Route’s match or any of the history object properties, that is when withRouter comes to rescue. Unfortunately the documentation in react-training as well as github on withRouter is incomplete and out of date. All I was looking for a simple example on how to use withRouter and I could not find a complete working example. So let me make life easier for you guys so that you don’t go through the same struggle that I had to go through.

Let’s create a working example of withRouter usage to help you understand better.

First do the regular imports of React, withRouter, BrowserRouter as Router,
Switch, Route, Link, DefaultRoute, RouteHandler.

import React from 'react';
import { withRouter } from "react-router";

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  DefaultRoute, RouteHandler 
} from "react-router-dom";

Let’s create a ShowPath function component. It will simply show the current path your app is in.

class ShowPath extends React.Component {
  render() {
    const { location } = this.props;	

    return (
	  <div>
         <h1>You are currently at {location.pathname}</h1>	 		 
	  </div>
    )
  }
}

Look carefully how we are using pathname property of location object to get the actual current app path. Now let’s create a component using withRouter higher-order component with the ShowPath component as an argument.

const ShowPathWithRouter = withRouter(ShowPath);

Now let us create our our App where we will have Router component and Routes defined. We will add the ShowPathWithRouter at the top of Router so that current path is displayed.

export default function App() {
  return <div>
  
  <Router>
     <ShowPathWithRouter/>	 
     <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About Me</Link>
            </li>
            <li>
              <Link to="/products">Our Products</Link>
            </li>
          </ul>
     </nav>
	  <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/products">
            <Products/>
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
    
  </Router>	
  </div>;
}

Please ensure that ShowPathWithRouter component is put inside the Router component as shown above. When your app is up and running and you browse at http://localhost:3000/products you should see something like this. See at the top, you are seeing /products in the path. If you click on Home or About Me it will change accordingly.

The complete source code is below for your reference.

import React from 'react';
import { withRouter } from "react-router";

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  DefaultRoute, RouteHandler 
} from "react-router-dom";


class ShowPath extends React.Component {
  render() {
    const { location } = this.props;	

    return (
	  <div>
         <h1>You are currently at {location.pathname}</h1>	 		 
	  </div>
    )
  }
}


const ShowPathWithRouter = withRouter(ShowPath);

export default function App() {
  return <div>
  
  <Router>
     <ShowPathWithRouter/>	 
     <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About Me</Link>
            </li>
            <li>
              <Link to="/products">Our Products</Link>
            </li>
          </ul>
     </nav>
	  <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/products">
            <Products/>
          </Route>
          <Route path="/">
            <Home/>
          </Route>
        </Switch>
    
  </Router>	
  </div>;
}

function About() {
	return <p>This is an awesome about page</p>
}


function Products() {
	return <p>I have so many products that you can buy</p>;
}

function Home() {
	return <p>You are under Home sweet Home</p>
}

In case you are struggling with your withRouter doubts and getting any weird errors, please post in comments section and I will help you guys.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tagged ,

Leave a Reply

Your email address will not be published. Required fields are marked *