react-router v6：获取当前路由的路径模式答案

【问题标题】：react-router v6: get path pattern for current routereact-router v6：获取当前路由的路径模式
【发布时间】：2021-05-21 17:43:29
【问题描述】：

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

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

// Page.jsx

function Page() {
    ...
    // usePathPattern doesn't actually exist
    const pathPattern = usePathPattern(); // pathPattern = ":state/:city*"
    ...
}

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

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

你可以使用 useLocation 钩子https://reactrouter.com/web/api/Hooks/uselocation。

在您的情况下，我看到您正在使用参数，因此 useParams 挂钩将使您能够访问路径模式 https://reactrouter.com/web/api/Hooks/useparams。

还有

window.location.pathname

会给你当前的网址

【讨论】：

不过，这些都不会返回实际的路径模式。 useParams 返回参数的键/值对象，但路径模式字符串仍然未知。 window.location.pathname 和 useLocation 都只是返回当前路径。

【解决方案2】：

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>

【讨论】：

【解决方案3】：

在Route 的上下文中，您可以通过the docs 中列出的几种方法获取path。

我的问题略有不同，因为我需要在 Route 的上下文之外使用 path 并得出以下解决方案，它也应该适用于您：

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

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

function usePathPattern() {

    const { pathname } = useLocation();

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

【讨论】：

【解决方案4】：

这不是问题的直接答案，但是那些在尝试从 match 对象中获取 params 时发现此问题的人，现在可以使用 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>
}

希望有用。

【讨论】：

【解决方案5】：

你现在不能。这是解决方法：

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

我假设您正在尝试在多个路径下呈现相同的组件。无需检查路径模式，您可以向组件添加一个布尔 prop（在本例中为 city）并检查该 prop 是否为真。

【讨论】：

【解决方案6】：

这对我来说很容易

首先从 react-router-dom 导入 uselocation

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

然后

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

【讨论】：

这给出了文字路径而不是路径模式。