How to Pass Data from a Page to Another Page Using React Router v6

Navigating through the intricate world of React applications, developers often encounter the challenge of passing data between pages. It's like trying to pass a secret note in class without the teacher noticing.

React Router v6, the latest version of the popular library for handling routing in React applications, introduces more streamlined and efficient ways to navigate and manage state across components.

Let's dive into how you can pass data from one page to another, ensuring our secret note reaches its intended recipient without getting lost along the way.

Part 1: Setting the Scene with React Router v6

Understanding React Router Basics

Before we start smuggling our data across components, let's set up our environment. React Router v6 offers a declarative approach to routing, allowing us to map our application's navigation structure with ease.

Think of it as creating a map for our data to follow, ensuring it doesn't wander off into the abyss of the unknown.

Installation

First things first, ensure React Router is installed in your project:

npm install react-router-dom@6

Configuring Routes

Imagine our application is a bustling city, and our components are its destinations. We need to define routes so our data knows where to go.

In your App.js or main component file, set up your router:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';
import DetailPage from './DetailPage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/detail" element={<DetailPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Navigating the Routes

To move between our pages, we use the Link component, creating clickable links that don't refresh the entire page:

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

function HomePage() {
  return (
    <div>
      <h1>Welcome to the HomePage</h1>
      <Link to="/detail">Go to Detail Page</Link>
    </div>
  );
}

Part 2: Passing the Secret Note (Data)

Now, onto the main event: passing data between pages. In React Router v6, there are several ways to achieve this, each akin to choosing the best mode of transportation for our secret note.

Method 1: Using State in Link (Recommended)

The Link component can carry a payload, allowing us to pass state along with our navigation. This method is like attaching our note to a carrier pigeon; it goes directly where it needs to without any detours.

In your HomePage component:

<Link to="/detail" state={{ message: 'Hello from HomePage!' }}>Go to Detail Page</Link>

And in your DetailPage component, you access the state like so:

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

function DetailPage() {
  const location = useLocation();
  const message = location.state?.message;

  return (
    <div>
      <h1>Detail Page</h1>
      <p>Message: {message}</p>
    </div>
  );
}

Method 2: Context API or Global State Management

For longer journeys or when the data needs to be accessed by multiple components, consider using React's Context API or a state management library like Redux.

This is akin to setting up a public transportation system for our data, making it accessible wherever needed.

Method 3: URL Parameters

Sometimes, the data we're passing is not sensitive and can be transported openly, like posting a notice on a community bulletin board. For these cases, URL parameters are a suitable choice.

In your App.js, define a route with a parameter:

<Route path="/detail/:message" element={<DetailPage />} />

Then, navigate using Link with a dynamic path:

<Link to={`/detail/${encodeURIComponent('Hello from HomePage!')}`}>Go to Detail Page</Link>

In DetailPage, retrieve the parameter from the URL:

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

function DetailPage() {
  const { message } = useParams();
  const decodedMessage = decodeURIComponent(message);

  return (
    <div>
      <h1>Detail Page</h1>
      <p>Message: {decodedMessage}</p>
    </div>
  );
}

Conclusion

As we've explored, passing data between pages in a React application using React Router v6 can be achieved in multiple ways, each with its own use case and charm.

Whether you're attaching your data to a carrier pigeon, setting up a public transportation system, or posting a notice on a bulletin board, the key is to choose the method that best suits the nature of your data and the structure of your application.

Remember, the paths we create in our React applications are not just routes in a digital space; they're conduits for stories, information, and interactions.

By mastering the art of data passing, we ensure these narratives flow seamlessly from one page to the next, enriching the user experience and knitting the fabric of our digital ecosystems tighter with every click.