Passing Data with React Router

When building single-page applications, it is often necessary to pass data between different pages. React Router provides two main ways to achieve this: URL parameters and state.

URL Parameters

URL parameters allow you to define dynamic routes and access the parameters in the target component. To use URL parameters with React Router, you can specify a dynamic route in your route configuration and access the parameters in the component.

Here's an example of defining a dynamic route and accessing the parameter in the component:

1import { Route } from 'react-router-dom';
2
3const User = ({ match }) => {
4  const { id } = match.params;
5
6  // Use the id to fetch user data or perform
7  // any other necessary operations
8
9  return (
10    <div>
11      <h2>User {id}</h2>
12      {/* Display user information */}
13    </div>
14  );
15};
16
17const App = () => {
18  return (
19    <div>
20      <Route path="/user/:id" component={User} />
21    </div>
22  );
23};

In this example, we define a dynamic route '/user/:id' which matches any path starting with '/user/' followed by a value for 'id'. In the 'User' component, we access the 'id' parameter using 'match.params.id' and can use it to fetch user data or perform any other necessary operations.

State

React Router also provides a convenient way to pass data between routes using state. When navigating to a new route, you can include a state object which will be passed to the target component.

Here's an example of navigating to a new route and passing state:

1import { useHistory } from 'react-router-dom';
2
3const App = () => {
4  const history = useHistory();
5
6  const handleNavigate = () => {
7    const state = { id: 123 };
8
9    history.push({
10      pathname: '/user',
11      state: state
12    });
13  };
14
15  return (
16    <div>
17      <button onClick={handleNavigate}>Go to User</button>
18    </div>
19  );
20};
21
22const User = ({ location }) => {
23  const { id } = location.state;
24
25  // Use the id to display user information or perform
26  // any other necessary operations
27
28  return (
29    <div>
30      <h2>User {id}</h2>
31      {/* Display user information */}
32    </div>
33  );
34};

In this example, we use the 'useHistory' hook to access the history object. When the button is clicked, we create a state object with the 'id' property and navigate to the '/user' route, passing the state object as part of the location. In the 'User' component, we access the state using 'location.state.id' and can use it to display user information or perform any other necessary operations.

xxxxxxxxxx

// any other necessary operations.

// Passing data using React Router

​

// In React Router, data can be passed between pages using

// URL parameters and state.

​

// URL Parameters

​

// To pass data through URL parameters, you can specify

// a dynamic route in your route configuration and

// access the parameters in the component.

​

// Route configuration:

// <Route path="/user/:id" component={User} />

​

// Component:

// const User = ({ match }) => {

//   const { id } = match.params;

//   // Use the id to fetch user data

//   // ...

// }

​

// The above code defines a dynamic route '/user/:id'

// which matches any path starting with '/user/'

// followed by a value for 'id'. In the 'User' component,

// the parameter is accessed using 'match.params.id'

// and can be used to fetch user data or perform any

// other necessary operations.

​

// State