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

Posted 2023-02-21

【中文标题】react-router v6：获取当前路由的路径模式

【英文标题】：react-router v6: get path pattern for current route

【发布时间】：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 来检查当前位置是否与特定路径模式匹配，但是组件必须知道路径模式是什么。

【参考方案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);

【讨论】：

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