Comment puis-je transmettre des données entre les pages à l'aide de React Router ?

Transmission de données entre les pages de React Router

Présentation

React Router est une bibliothèque puissante pour implémenter la navigation dans les applications React. Il vous permet de définir des itinéraires et de gérer les transitions de page de manière transparente. Un cas d'utilisation courant consiste à transmettre des données entre les pages pour les afficher ou les traiter davantage.

Solution :

Option 1 : État de la route

Avec React Router v6, vous pouvez utiliser l'état propriété des composants Link ou Navigate pour transmettre des données lors de la navigation. Ces données sont accessibles via l'objet de localisation sur la page de destination.

Option 2 : Chemin de l'URL

Une autre option consiste à incorporer des données dans le chemin de l'URL en utilisant la notation :. Les données peuvent être récupérées à partir des accessoires de correspondance sur la page de destination.

Option 3 : chaîne de requête d'URL

Semblable à l'utilisation du chemin d'URL, vous pouvez ajouter des données à la chaîne de requête d'URL à l'aide du ? symbole. Ces données sont accessibles via le hook useSearchParams ou la propriété de recherche de l'objet de localisation sur la page de destination.

Exemple :

Considérons un scénario dans lequel vous souhaitez naviguer d'une liste d'utilisateurs à un utilisateur. page de détails.

// User List Page
import React, { Component } from "react";

export default class User extends Component {
  render() {
    return (
      {this.props.users.map(user => (
        <Link key={user.id} to={`/user/${user.id}`}>
          {user.name}
        </Link>
      ))}
    );
  }
}

// User Details Page
import React from "react";
import { useParams } from "react-router-dom";

export default function UserDetails() {
  const { id } = useParams();
  return (
    {id}
  );
}

Dans cet exemple, lorsqu'un utilisateur clique sur le nom d'un utilisateur, il est dirigé vers la Page UserDetails, qui reçoit l'ID de l'utilisateur via le chemin URL.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!