React-Router：在根组件监听路由变化并打印模板路径而非实际路径

可以实现，核心是通过路由配置数组结合React Router的路由匹配工具，从当前路由中解析出模板路径（如users/:userId），而非实际参数路径。

实现步骤 #

1. 先定义一份统一的路由配置数组，把所有路由的模板路径、对应组件都写在这里，后续路由渲染和匹配都基于这份配置：

const routes = [
  { path: '/', element: <Home /> },
  { path: 'users/:userId', element: <User /> },
  { path: 'posts/:postId/comments', element: <Comments /> },
  // 嵌套路由示例
  {
    path: 'dashboard',
    element: <Dashboard />,
    children: [
      { path: 'settings', element: <Settings /> },
      { path: 'analytics', element: <Analytics /> },
    ],
  },
];

2. 在根组件中，使用matchRoutes函数匹配当前路由，从匹配结果中提取模板路径：

import { useEffect } from 'react';
import { useHistory, matchRoutes, Routes, Route } from 'react-router-dom';

// 上面的routes配置放在这里

export default function App() {
  const history = useHistory();

  useEffect(() => {
    const unlisten = history.listen((location) => {
      // 匹配当前location和路由配置，得到所有层级的匹配结果
      const matchedRoutes = matchRoutes(routes, location);
      if (matchedRoutes.length) {
        // 取最后一项，对应最具体的路由模板（比如嵌套路由里的子路由）
        const targetRoute = matchedRoutes[matchedRoutes.length - 1];
        console.log(`路由模板：${targetRoute.route.path}`);
      }
    });

    return () => unlisten();
  }, [history]);

  // 基于路由配置渲染路由
  return (
    <Routes>
      {routes.map((route, idx) => (
        <Route key={idx} path={route.path} element={route.element}>
          {route.children?.map((child, childIdx) => (
            <Route key={childIdx} path={child.path} element={child.element} />
          ))}
        </Route>
      ))}
    </Routes>
  );
}

关键说明 #

• matchRoutes会返回当前路由对应的所有层级匹配项（比如访问/dashboard/settings时，会匹配dashboard和settings两个路由项），取最后一项就能拿到最具体的模板路径。
• 必须维护统一的路由配置数组，这是获取模板路径的前提——React Router不会自动存储所有路由的模板信息，需要你主动定义后用来匹配。
• 该方案适用于React Router v6，如果你用的是v5，可以替换为matchPath函数，逻辑类似：遍历路由配置，用matchPath逐个匹配当前路径，找到匹配项后取其path。

内容的提问来源于stack exchange，提问作者Alex Nault