react-router v6 如何在组件外部访问URL参数（附v5实现参考）

React Router v6 移除了v5版本中Route组件的render、component属性，统一使用element属性传入要渲染的JSX元素，你要实现和v5相同的逻辑，有两种常用写法：

写法1：内联包装（和你原有v5写法逻辑最接近） #

直接在element属性内通过匿名组件调用useParams获取参数，再传递给Post组件：

import { Route, useParams } from 'react-router-dom';

// v6 对应实现
<Route
  path="/blog/:id"
  element={
    <>
      {(() => {
        const { id } = useParams();
        return <Post item={getPostById(id)} />;
      })()}
    </>
  }
/>

写法2：单独封装包装组件（更易维护） #

如果逻辑比较复杂，也可以单独抽离包装组件，路由配置更简洁：

import { Route, useParams } from 'react-router-dom';

const PostWrapper = () => {
  const { id } = useParams();
  return <Post item={getPostById(id)} />;
};

// 路由配置
<Route path="/blog/:id" element={<PostWrapper />} />

完全脱离组件树获取参数的方式 #

如果你需要在React组件外部的工具函数等场景获取路由参数，可以使用v6提供的matchPath方法配合路由实例实现：

import { matchPath } from 'react-router-dom';
// 你通过createBrowserRouter创建并导出的路由实例
import router from './router';

const getBlogId = () => {
  const matchResult = matchPath(
    { path: '/blog/:id' },
    router.state.location.pathname
  );
  return matchResult?.params.id;
};

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