Pourquoi react router v6 useParams renvoie-t-il un objet avec des propriétés potentiellement 'undefined'?

Question

Pourquoi react router v6 useParams renvoie un objet avec des propriétés potentiellement 'undefined' ?

Dans mon code ci-dessous, mon IDE indique const slug: string | undefined.

const { slug } = useParams<"slug">();

C'est à cause de la definition de type Params:

/**
 * Les paramètres qui ont été analysés à partir du chemin d'URL.
 */
export type Params = {
  readonly [key in Key]: string | undefined;
};

Mais pourquoi Params n'est-il pas défini comme ceci (sans le | undefined):

export type Params = {
  readonly [key in Key]: string;
};

Si une route avec un paramètre correspond à l'URL alors le paramètre ne peut pas être undefined. Alors, y a-t-il un cas où useParams renvoie avec un paramètre undefined ?

Answer 1

Les paramètres de route peuvent être potentiellement indéfinis si le chemin n'a pas de paramètres définis.

Exemple: "/chemin/vers/page"

Il n'y a pas de paramètres de correspondance de route à accéder.

Si vous tentiez d'accéder à un paramètre

const { id } = useParams();

alors id est bien sûr indéfini.

Answer 2

Je crois que c'est un choix de conception discutable pour les développeurs. React Router 6 ne prend pas en charge les paramètres optionnels, donc il n'y a pas de raison apparente, mais même s'il le prenait en charge, ce devrait être à l'utilisateur de déterminer quels paramètres sont optionnels.

Une façon de contourner cela est la suivante:

export type MyParams = {
  a: string;
  b: string;
  c: string;
};

const { a, b, c } = useParams() as MyParams;