1. 首页
  2. 问题
  3. react-router v6：获取当前路线的路径模式
小能豆

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

javascript

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

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

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

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


阅读 38

收藏
2024-06-06

共1个答案

小能豆

在 React Router 中，没有内置钩子可以usePathPattern直接提供当前匹配路由的路径模式。但是，你可以利用钩子useRoutes结合路由器上下文来访问匹配的路由及其配置。

以下是实现此功能的方法：

  1. 创建一个自定义钩子usePathPattern来从匹配的路线中提取路径模式。
  2. 在组件内部使用这个钩子来获取路径模式。

步骤 1：创建usePathPattern钩子

创建一个自定义钩子，访问匹配的路由对象并提取路径模式。

import { useRoutes, useLocation, matchRoutes } from 'react-router-dom';

// Define your route configurations
const routes = [
  {
    path: ":state/:city*",
    element: <Page />,
  },
  // Add other routes as needed
];

function usePathPattern() {
  const location = useLocation();
  const matches = matchRoutes(routes, location);

  if (!matches || matches.length === 0) {
    return null;
  }

  // Get the last matched route (deepest nested route)
  const match = matches[matches.length - 1];

  return match.route.path;
}

步骤 2：usePathPattern在组件中使用

使用usePathPattern组件内部的钩子来获取路径模式。

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function Page() {
  const pathPattern = usePathPattern();

  return (
    <div>
      <h1>Page Component</h1>
      <p>Path Pattern: {pathPattern}</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path=":state/:city*" element={<Page />} />
        {/* Add other routes as needed */}
      </Routes>
    </Router>
  );
}

export default App;

解释

  1. 自定义挂钩usePathPattern：
  2. 用于useLocation获取当前位置。
  3. 用于matchRoutes根据路线配置查找当前位置匹配的路线。
  4. 从匹配的路线中提取路径模式。
  5. 使用钩子：
  6. 在Page组件中，usePathPattern被调用来获取当前的路径模式。
  7. 然后路径模式就会显示在组件中。

笔记

  • 确保您的路由配置对象（routes在示例中）定义在可以通过自定义钩子和主路由器配置导入的地方。
  • 根据需要调整路线定义以匹配您的应用程序的结构。

通过遵循这些步骤，您可以动态访问组件内当前匹配的路由的路径模式。

2024-06-06