React中使用useParams获取路径末段参数返回undefined的解决方法

useParams 读取的是React Router路由匹配规则里提前声明的动态路径参数，你拿到undefined只有一个核心原因：当前匹配的路由路径规则里，没有定义名为id的动态参数占位符，路由库根本不会自动把路径最后一段解析成id字段返回。

• 第一步：修改路由配置，给对应路径加上:id动态参数声明
  React Router v6/v7版本的路由配置参考示例：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";

// 根路由配置
export default function RouterConfig() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 关键：路径写为/:id，声明这一段是名为id的动态参数 */}
        <Route path="/:id" element={<App />} />
      </Routes>
    </BrowserRouter>
  );
}

• 第二步：确认组件挂载位置
  要保证写了useParams的App组件，是被上述带:id参数的Route直接渲染的。如果组件写在路由容器外面、或者匹配的是其他没有声明id参数的路由规则，依然会读到undefined。

配置正确后访问http://myapp.com/123，useParams()的返回值就是{id: "123"}，解构拿到的id就是字符串类型的路径段值。

如果你不想依赖路由参数解析，只是单纯想取当前URL路径的最后一段，也可以直接用原生JS实现，不需要改路由配置：

// 原生实现，无需路由配置
const pathSegList = window.location.pathname.split('/').filter(Boolean);
const lastSeg = pathSegList[pathSegList.length - 1]; // 即为路径最后一段值

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