import { useMatch, Route, Routes } from "react-router-dom"; <Routes> <Route path="/" element={<Element1 match={useMatch("/")} />} > <Route path=":id" element={<Element2 match={useMatch("/:id")} />} /> </Route> </Routes>

Desde dentro del contexto de una Route , puede obtener la path a través de varios métodos establecidos en los documentos .

Mi problema fue ligeramente diferente en el sentido de que necesitaba la path fuera del contexto de la Route y llegué a la siguiente solución que también debería funcionar para usted:

 import { matchPath, useLocation } from "react-router-dom"; const routes = [ ':state/:city', ...otherRoutes ]; function usePathPattern() { const { pathname } = useLocation(); return matchPath( pathname, routes )?.path; }

Puede usar el enlace useLocation https://reactrouter.com/web/api/Hooks/uselocation .

En su caso, veo que está usando parámetros, por lo que useParams hook le dará acceso al patrón de ruta https://reactrouter.com/web/api/Hooks/useparams .

además

 window.location.pathname

te dará la url actual

Hice un enlace personalizado useCurrentPath con react-router v6 para obtener la ruta de ruta actual, y funcionó para mí

Si la ruta actual es /members/5566 , obtendré la ruta /members/:id

 import { matchRoutes, useLocation } from "react-router-dom" const routes = [{ path: "/members/:id" }] const useCurrentPath = () => { const location = useLocation() const [{ route }] = matchRoutes(routes, location) return route.path }

 function MemberPage() { const currentPath = useCurrentPath() // `/members/5566` -> `/members/:id` return <></> }

Referencia

https://reactrouter.com/docs/en/v6/api#matchroutes

No es una respuesta directa a la pregunta, pero aquellos que encontraron esta pregunta mientras intentaban obtener los params del objeto de match , ahora pueden hacerlo con el gancho useParams .

 import { Route, Routes } from 'react-router-dom'; import { useParams } from 'react-router'; <Routes> <Route path="/:id" element={<MyComponent />} /> </Routes> ... function MyComponent() { const { id } = useParams(); return <div>{id}</div> }

Espero que sea útil.

No estoy seguro de si resuelve su caso de uso por completo, pero en mi caso usé una combinación de useLocation y useParams . Aquí está el código:

 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); (...) };

Escribí un enlace personalizado para ese propósito, ya que no parece ser compatible con oob en este momento:

Nota: aún no se ha probado a fondo. Así que úsalo con precaución.

 import { useLocation, useParams } from 'react-router'; export function useRoutePathPattern() { const routeParams = useParams(); const location = useLocation(); let routePathPattern = location.pathname; Object.keys(routeParams) .filter((paramKey) => paramKey !== '*') .forEach((paramKey) => { const paramValue = routeParams[paramKey]; const regexMiddle = new RegExp(`\/${paramValue}\/`, 'g'); const regexEnd = new RegExp(`\/${paramValue}$`, 'g'); routePathPattern = routePathPattern.replaceAll( regexMiddle, `/:${paramKey}/`, ); routePathPattern = routePathPattern.replaceAll(regexEnd, `/:${paramKey}`); }); return routePathPattern; }

Esto parece funcionar con lo que realmente exportan a partir de 6.2.1, sin embargo, utiliza un componente que exportan como UNSAFE_

 import { UNSAFE_RouteContext } from 'react-router-dom'; const reconstructPath = (matches) => matches .map(({ route: { path } }) => path.endsWith('/*') ? path.slice(0, -1) : path ? path + '/' : '' ) .join(''); const findLastNode = (node) => node.outlet ? findLastNode(node.outlet.props.value) : node; const usePathPattern = () => reconstructPath( findLastNode(React.useContext(UNSAFE_RouteContext)).matches );

No puedes en este momento. Aquí está el trabajo:

 <Route path="/:state" element={<LocationView />} /> <Route path="/:state/:city*" element={<LocationView city />} />

Supongo que está tratando de representar el mismo componente en varias rutas. En lugar de verificar el patrón de la ruta, puede agregar una propiedad booleana al componente (en este caso, city ) y verificar si la propiedad es verdadera.

esto me funciona facilmente

en primer lugar, importe la ubicación de uso desde react-router-dom

 import { useLocation } from "react-router-dom"

luego

 const location = useLocation(); console.log(location.pathname);