How to Pass Data Across Routes with React Router
Tags: react, tutorial, frontend, javascript
Published: 2023-08-26 20:05:40

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](https://reactrouter.com/) 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'
}
```
<p>&nbsp;</p>
## 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
```

<p>&nbsp;</p>
## 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. 
<p>&nbsp;</p>
## 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>
  )
}
```
<p>&nbsp;</p>
## 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>
  )
}
```
<p>&nbsp;</p>
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](https://stackblitz.com/edit/stackblitz-starters-kfndre?file=src%2FPage1.js) 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!