React-router v6：获取当前路由的路径模式

Question

是否可以获得当前匹配路由的路径模式？例子：

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

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

我知道我可以用来useMatch检查当前位置是否与特定路径模式匹配，但组件必须知道路径模式是什么。

Answer 1

我用react-router v6制作了一个自定义钩子useCurrentPath来获取当前的路由路径，它对我有用

如果当前路径名是/members/5566我将得到路径/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 <></>
}

参考

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

Answer 2

我不确定它是否完全解决了您的用例，但就我而言，我使用了useLocation和的组合useParams。这是代码：

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);

  (...)
};

Answer 3

从 a 的上下文中，Route您可以通过文档path中列出的几种方法来获取。

我的问题略有不同，因为我需要path外部的上下文Route，并得出了以下也应该适合您的解决方案：

import {
    matchPath,
    useLocation
} from "react-router-dom";

const routes = [ ':state/:city', ...otherRoutes ];

function usePathPattern() {

    const { pathname } = useLocation();

    return matchPath( pathname, routes )?.path;
}

Answer 4

这对我来说很容易

首先从react-router-dom导入uselocation

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

然后

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

Answer 5

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>