How to Pass State Through Navigation in React

In React, you can pass state through navigation using React Router's useNavigate hook by providing a state object as the second argument. The receiving component can access this state via the useLocation hook's location.state property.

Syntax

Use useNavigate to move to a new route and pass state as an object. The receiving component uses useLocation to read the passed state.

• navigate(path, { state: yourStateObject }): Navigate to path and send yourStateObject.
• const location = useLocation(): Get current location including passed state.
• location.state: Access the passed state object.

javascript

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

// To send state
const navigate = useNavigate();
navigate('/target', { state: { key: 'value' } });

// To receive state
const location = useLocation();
const passedState = location.state;

Example

This example shows two components: Sender navigates to Receiver passing a message as state. The Receiver displays the passed message.

javascript

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useNavigate, useLocation } from 'react-router-dom';

function Sender() {
  const navigate = useNavigate();
  const handleClick = () => {
    navigate('/receiver', { state: { message: 'Hello from Sender!' } });
  };
  return (
    <div>
      <h2>Sender Component</h2>
      <button onClick={handleClick}>Go to Receiver with State</button>
    </div>
  );
}

function Receiver() {
  const location = useLocation();
  const message = location.state?.message || 'No message received';
  return (
    <div>
      <h2>Receiver Component</h2>
      <p>Message: {message}</p>
    </div>
  );
}

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Sender />} />
        <Route path="/receiver" element={<Receiver />} />
      </Routes>
    </Router>
  );
}

Output

Sender Component with a button labeled 'Go to Receiver with State'. Clicking the button navigates to Receiver Component showing 'Message: Hello from Sender!'

Common Pitfalls

• Undefined state: If you refresh the receiving page, location.state may be undefined because state is not persisted in the URL.
• Incorrect usage: Passing state without wrapping navigation in useNavigate or trying to access state without useLocation causes errors.
• State shape mismatch: Always check if location.state exists before accessing properties to avoid runtime errors.

javascript

/* Wrong: Trying to access state without useLocation */
function ReceiverWrong() {
  // This will cause error because location is undefined
  const message = location.state.message;
  return <p>{message}</p>;
}

/* Right: Use useLocation and optional chaining */
import { useLocation } from 'react-router-dom';
function ReceiverRight() {
  const location = useLocation();
  const message = location.state?.message || 'No message';
  return <p>{message}</p>;
}

Quick Reference

• Use useNavigate() to navigate and pass state: navigate('/path', { state: { key: value } }).
• Use useLocation() in the target component to read state: const location = useLocation(); location.state.
• Always check if location.state exists before using it.
• State passed this way is not persistent on page reload.

Key Takeaways

Pass state during navigation using useNavigate with a state object.

Access passed state in the target component with useLocation and location.state.

Always check for undefined state to avoid errors.

State passed via navigation is temporary and lost on page reload.

Use this method for simple data transfer between routes without global state.