How to reset location state in react router

In React Router, location state is a method to carry additional data during navigation, enabling us to pass information between components without relying on URL parameters. Sometimes, we need to reset these states after specific operations to ensure they do not persist when users revisit the same page.

How to Reset Location State?

There are several approaches to reset location state; here are two commonly used examples:

Method 1: Using <Link> or <NavLink> Components

When navigating with <Link> or <NavLink>, reset the state by passing state as null or an empty object {}. For example:

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

function ResetStateButton() {
  return (
    <Link to={{ pathname: "/somepath", state: {} }}>Go to SomePath and reset state</Link>
  );
}

In this example, clicking the link navigates to /somepath with an empty state object, so the location state received in the target component is empty.

Method 2: Using the useNavigate Hook

In React Router v6, use useNavigate for programmatic navigation. To reset state, pass an empty object to the state parameter.

jsx
import React from 'react';
import { useNavigate } from 'react-router-dom';

function ResetStateButton() {
  const navigate = useNavigate();

  function handleClick() {
    navigate("/somepath", { state: {} });
  }

  return (
    <button onClick={handleClick}>Go to SomePath and reset state</button>
  );
}

Here, the button executes handleClick on click, which navigates to the page using useNavigate while resetting the state.

Practical Scenarios for Resetting State

Consider a form that navigates to a success page after submission, carrying submission data in the state. After the user views the information and leaves the page, if they return via the browser's back button, to prevent old submission data from being displayed, reset the state when navigating away. In such cases, use useNavigate during component unmount to reset or clear the state.

These methods effectively manage state navigation logic in React applications, ensuring stability and user-friendliness.