React dynamic routing processing guide: How to implement front-end dynamic page routing and parameter passing

React Dynamic Routing Processing Guide: How to implement front-end dynamic page routing and parameter passing

Introduction:
In React applications, routing is to implement front-end page jumps and one of the key mechanisms for parameter passing. For large applications or situations where dynamic pages need to be processed, flexible routing processing is essential. This article will introduce how to implement dynamic page routing and parameter passing in React, and provide specific code examples to help readers better understand.

1. Review of basic knowledge of React routing
In React, we often use the React Router library to implement routing functions. React Router provides the component to define routing rules, and uses the component to select matching routes. Basic routing components mainly include BrowserRouter, HashRouter, Route, Link, etc. For detailed usage of React Router, please refer to the official documentation.

2. Implement dynamic page routing

1. Define routing rules
   In React, we can define routing rules through the component. In routing rules, dynamic parameters can be used to match different URLs to implement dynamic page routing.

For example, we want to define a dynamic routing rule to match URLs in the form "/user/:id", where:id represents dynamic parameters. We can define routing rules like this:

2. Processing dynamic parameters
   After defining dynamic routing After setting the rules, we can obtain the parameters passed in the URL through props in the corresponding component.

In the above example, the routing rule "/user/:id" we defined will match URLs in the form "/user/123". In the UserDetail component, we can get the dynamic parameters in the URL through props.match.params.

Specific examples are as follows:
import React from 'react';
import { Route } from 'react-router-dom';

const UserDetail = (props) => ; {

const userId = props.match.params.id;
return (
    <div>
        <h1>User Detail Page</h1>
        <p>User ID: {userId}</p>
    </div>
);

};

export default UserDetail;

3. Implement parameter transfer

1. Use Query parameter transfer
   In addition to passing In addition to dynamic routing parameters to pass parameters, we can also use Query parameters to pass parameters. Through the Query parameter, we can directly append parameters to the URL, such as "/user?id=123", and then obtain the parameter through props.location.search in the target component.

Specific examples are as follows:
import React from 'react';

const UserDetail = (props) => {

const searchParams = new URLSearchParams(props.location.search);
const userId = searchParams.get('id');
return (
    <div>
        <h1>User Detail Page</h1>
        <p>User ID: {userId}</p>
    </div>
);

};

export default UserDetail;

2. Use state parameters to pass
   In addition to Query parameters, we can also use state parameters to pass parameters. The state parameter does not appear in the URL, but is stored in the location.state object. We can pass the state parameter through the second parameter when jumping to the page.

Specific examples are as follows:
import React from 'react';
import { Link } from 'react-router-dom';

const UserList = () => {

const userList = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

return (
    <div>
        <h1>User List Page</h1>
        <ul>
            {userList.map(user => (
                <li key={user.id}>
                    <Link
                        to={{
                            pathname: `/user/${user.id}`,
                            state: { name: user.name }
                        }}
                    >
                        {user.name}
                    </Link>
                </li>
            ))}
        </ul>
    </div>
);

};

export default UserList;

In the above example, when we jump to the page, we pass an object through the to attribute, where pathname specifies the target URL, and the state attribute can pass any parameters. In the UserDetail component, we can get the passed parameters through props.location.state.

Summary:
Through React Router, we can implement front-end dynamic page routing and parameter passing. When defining routing rules, you can use dynamic parameters to match different URLs and obtain parameters through props.match.params. In addition, parameters can also be passed through Query parameters and state parameters. When using the Query parameter, you can get the parameters through props.location.search; when using the state parameter, you can get the parameters through props.location.state.

The above is a brief introduction to React dynamic routing processing, and specific code examples are used to help readers better understand the implementation method of routing processing. In actual development, we can choose the appropriate way to handle dynamic page routing and parameter passing according to needs.

The above is the detailed content of React dynamic routing processing guide: How to implement front-end dynamic page routing and parameter passing. For more information, please follow other related articles on the PHP Chinese website!