Ich weiß, dass ich es gebrauchen kann useMatch um zu überprüfen, ob die aktuelle Position mit einem bestimmten Pfadmuster übereinstimmt, aber dann muss die Komponente wissen, was das Pfadmuster ist.
Futian Shen
Ich habe einen benutzerdefinierten Haken gemacht useCurrentPath mit React-Router v6, um den aktuellen Routenpfad zu erhalten, und es funktioniert für mich
Wenn der aktuelle Pfadname lautet /members/5566 Ich werde Pfad bekommen /members/:id
Das hat bei mir super funktioniert. Der benutzerdefinierte Haken ist eine persönliche Präferenz. Jedoch, useLocation + matchRoutes ist die Antwort.
– Hermann J. Radtke III
1. Mai um 19:33 Uhr
Dies scheint bei verschachtelten Routen mit relativen Pfaden nicht zu funktionieren. Wann zum Beispiel location.pathname ist "/users/123/profile" aber routes[0].path ist "profile" weil es unter verschachtelt ist "users/:id". Hast du dafür eine Lösung?
– eliw00d
28. Juli um 20:56 Uhr
m.wrona
Ich bin mir nicht sicher, ob es Ihren Anwendungsfall vollständig löst, aber in meinem Fall habe ich eine Kombination aus verwendet useLocation und useParams. Hier ist der Code:
import React from 'react';
import { useLocation, useParams } from 'react-router-dom';
import type { Location, Params } from 'react-router-dom';
/**
* Function converts path like /user/123 to /user/:id
*/
const getRoutePath = (location: Location, params: Params): string => {
const { pathname } = location;
if (!Object.keys(params).length) {
return pathname; // we don't need to replace anything
}
let path = pathname;
Object.entries(params).forEach(([paramName, paramValue]) => {
if (paramValue) {
path = path.replace(paramValue, `:${paramName}`);
}
});
return path;
};
export const Foo = (): JSX.Element => {
const location = useLocation();
const params = useParams();
const path = getRoutePath(location, params);
(...)
};
Diese Lösung würde brechen, wenn Teile des Pfades denselben Wert haben, z /user/1/badge/1/comment/1. Obwohl dies ein ungewöhnliches Szenario ist, ist diese Lösung immer noch nicht universell zuverlässig.
@HermanJ.RadtkeIII Link scheint defekt zu sein. Vielleicht meinst du Dies
– Reimirno
7. Juli um 3:51
Aus dem Kontext von a Route du kannst die bekommen path über mehrere Methoden, die in dargelegt sind die Dokumente.
Mein Problem war insofern etwas anders, als ich das brauchte path außerhalb des Kontextes der Route und kam zu der folgenden Lösung, die auch für Sie funktionieren sollte:
Um die passende Route in React-Router v6 zu finden, müssen Sie die verwenden matchPath Funktion. Sie müssen alle Ihre Routen in einer Variablen wie einem Array speichern. Dann können Sie alle Routen durchlaufen und diese Funktion verwenden, um die passende Route zu finden. Da es mit dem ersten Wahrheitswert übereinstimmt, müssen Sie sie idealerweise in derselben Reihenfolge durchlaufen, in der Sie sie gerendert haben.
Dies ist keine perfekte Lösung, da verschachtelte Routen möglicherweise nicht verarbeitet werden, es sei denn, Sie speichern diese in derselben Variablen.