React

React Router History -implement back and next functionality using hooks

history

Whenever you build an application one of the critical functionality is to build back and forward functionalities so that the user can easily navigate. Here the react router history is extremely useful.

Let’s quickly build back and next functionality in our react app using react router history.

Let’s first start with our traditional import statements. Observe that I am importing useHistory hook from react-router-dom library.

import React from 'react';

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

import { useHistory } from 'react-router-dom';

Once we are done with imports, let us build our simple Back Button component. When the user will click on this Back button, it will keep going back to the last page used, till the user is at the first page he used in the application.


function BackButton({ children }) {
  let history = useHistory();
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}

See how I am creating a history variable using the useHistory hook. And then I am calling goBack() API method of history object on the back button click.

Similarly let’s create a forward/next button component. It is very similar to Back button above, except that we shall call goForward API method of history object on click of forward button.

function NextButton({ children }) {
	let history = useHistory();
	return (
    <button type="button" onClick={() => history.goForward()}>
      {children}
    </button>
  );
}

Now that you have created your two awesome buttons through which user can go forward and backward. Let’s put these buttons inside the Router component.

export default function App() {
  return (
    
    <Router>
	  <BackButton>
	    Previous
	  </BackButton>
	  <NextButton>
	    Next
	  </NextButton>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About Me</Link>
            </li>
            <li>
              <Link to="/service">Services</Link>
            </li>
          </ul>
        </nav>

       
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/service">
            <Services/>
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

Here I have created some components that are called when user clicks on /about , /service or /.

function Home() {
  return <h2>Holy Cow Home Page</h2>;
}

function About() {
  return <h2>I am Anil. An awesome react developer. :) </h2>;
}

function Services() {
  return <h2>I provide amazing services at a very high cost. </h2>;
}

If you have done everything right as mentioned above, the react router history will work flawlessly for you and you should get something like this below.

You can click on Previous or Next buttons and keep going forward and backward in your application.

Here is the complete source code for reference.

import React from 'react';

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

import { useHistory } from 'react-router-dom';

function BackButton({ children }) {
  let history = useHistory();
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}


function NextButton({ children }) {
	let history = useHistory();
	return (
    <button type="button" onClick={() => history.goForward()}>
      {children}
    </button>
  );
}

export default function App() {
  return (
    
    <Router>
	  <BackButton>
	    Previous
	  </BackButton>
	  <NextButton>
	    Next
	  </NextButton>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About Me</Link>
            </li>
            <li>
              <Link to="/service">Services</Link>
            </li>
          </ul>
        </nav>

       
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/service">
            <Services/>
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Holy Cow Home Page</h2>;
}

function About() {
  return <h2>I am Anil. An awesome react developer. :) </h2>;
}

function Services() {
  return <h2>I provide amazing services at a very high cost. </h2>;
}

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 *