How to Pass Data Across Routes with React Router

URL parameters are a good way of passing data from page to page in a React application. But what if you don't want that data to show in your URL? Here's a great way to achieve that using the useLocation hook that React Router provides. If you're new to how React Router works, you can check out their docs for more information.

In this tutorial, we'll be persisting an object in our navigation to another page that looks like this:

{
  id: 123,
  name: 'Jane Doe'
}

Step 1: Installing dependencies

If you're using npm, run this command to install React Router in your application:

npm install react-router-dom

If you're using Yarn, do this:

yarn add react-router-dom

Step 2: Route Setup

In your App.js file, you'll have to define each route in your application. For simplicity, we'll be defining two routes, one for each page.

import React from 'react';
import Page1 from './Page1';
import Page2 from './Page2';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path={'/'} element={<Page1/>}/>
        <Route path={'/page2'} element={<Page2/>}/>
      </Routes>
    </Router>
  );
}

Note that a Route component must have a parent Routes component to wrap it.

Step 3: Passing Data to Page

In the component for the first page, we define an object to be passed to the next page. We'll be using React Router's Link component for this, which is pretty similar to rendering an <a> tag. The Link component has a state prop where we can pass in our state without it being encoded in the URL.

import React from 'react';
import { Link } from 'react-router-dom';

export default function Page1() {
  const routeState = {
    id: 123,
    name: 'Jane Doe'
  }

  return (
    <div>
      <h1>React Router Demo</h1>
      <Link to='/page2' state={routeState}>Next page</Link>
    </div>
  )
}

Step 4: Retrieving the State in the Next Page

Now that we've passed in our state, we can retrieve it in the destination route by using the useLocation hook. useLocation returns an object with information about the current URL, including the state property. On the destination page, we can simply refer to that state from the hook:

import React from 'react';
import { useLocation } from 'react-router-dom';

export default function Page2() {
  const location = useLocation();

  const id = location.state.id;
  const name = location.state.name;

  return (
    <div>
      <h1>Page 2</h1>
      <div>ID: {id}</div>
      <div>Name: {name}</div>
    </div>
  )
}

That's it! There are other ways of passing data between pages in React, of course, but this is definitely a good option if you don't want to add any parameters to your URL. You can also view the Stackblitz demo and play around with more routing options.

Please leave me a comment or reaction to let me know if this post helped. Thank you for reading!