React Router to pass data between pages

React Router provides several ways to pass data between pages, depending on your specific use case. Here are some common approaches:

1. URL Parameters: You can pass data between pages using URL parameters. In the sending page, you can add the data to the URL as a parameter, and in the receiving page, you can access the parameter from the props.match.params object.

Here’s an example of how to use URL parameters to pass data between pages:

// Sending page
import { Link } from 'react-router-dom';

function MyComponent() {
  const data = { name: 'John', age: 30 };

  return (
    <Link to={`/my-page/${data.name}/${data.age}`}>Go to My Page</Link>
  );
}

// Receiving page
function MyPage(props) {
  const { name, age } = props.match.params;

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

In this example, the MyComponent component adds the name and age properties of the data object to the URL as parameters. The Link component creates a link to the MyPage component with the URL /my-page/John/30.

In the `MyPage` component, the `name` and `age` parameters are accessed from the `props.match.params` object.

2. Query Parameters: You can also pass data between pages using query parameters. In the sending page, you can add the data to the URL as a query parameter, and in the receiving page, you can access the parameter from the props.location.search string.

Here’s an example of how to use query parameters to pass data between pages:

// Sending page
import { Link } from 'react-router-dom';

function MyComponent() {
  const data = { name: 'John', age: 30 };

  return (
    <Link to={`/my-page?name=${data.name}&age=${data.age}`}>Go to My Page</Link>
  );
}

// Receiving page
function MyPage(props) {
  const searchParams = new URLSearchParams(props.location.search);
  const name = searchParams.get('name');
  const age = searchParams.get('age');

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

In this example, the MyComponent component adds the name and age properties of the data object to the URL as query parameters. The Link component creates a link to the MyPage component with the URL /my-page?name=John&age=30.

In the MyPage component, the name and age parameters are accessed from the props.location.search string using the URLSearchParams API.

3. State: You can also pass data between pages using state. In the sending page, you can add the data to the state object of the history object, and in the receiving page, you can access the data from the location.state object.

Here’s an example of how to use state to pass data between pages:

// Sending page
import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();
  const data = { name: 'John', age: 30 };

  function handleClick() {
    history.push('/my-page', { data });
  }

  return (
    <button onClick={handleClick}>Go to My Page</button>
  );
}

// Receiving page
function MyPage(props) {
  const { data } = props.location.state;

  return (
    <div>
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
    </div>
  );
}

In this example, the MyComponent component adds the data object to the state object of the history object using the push method. The handleClick function is called when the button is clicked, and it navigates to the MyPage component with the data object in the state object.

In the MyPage component, the data object is accessed from the location.state object. Note that this approach only works if the user navigates to the receiving page using the history.push method, and not by directly entering the URL in the address bar.