React Router 6 路由组件外的Layout调用useParams无法获取params怎么办

结论 #

你当前的代码写法无法成功获取路由参数，useParams返回空对象属于预期行为。

原因 #

React Router v6 的 useParams() 钩子只能在 组件 element 属性渲染的组件树内部、或者 包裹的路由上下文范围中 读取到匹配的路由参数。你现在的 <Layout> 组件放在 <Routes> 外层，不属于当前匹配路由的上下文范围，自然无法拿到参数。

解决方案 #

提供两种常用修复方案：

方案1：改用嵌套路由布局（官方推荐）

将 Layout 作为父路由的布局组件，子路由嵌套在父路由下，同时在 Layout 中预留 <Outlet> 组件渲染子路由内容：

1. 修改 App.js 代码：

import { Routes, Route } from "react-router-dom";
import Layout from "./Layout";
import Homepage from "./Homepage";

const App = () => {
  return (
    <Routes>
      {/* 父路由匹配所有路径，用Layout作为全局布局 */}
      <Route element={<Layout />}>
        <Route path="/" element={<Homepage />} />
        <Route path="/:id" element={<Homepage />} />
      </Route>
    </Routes>
  );
}

2. 修改 Layout.js 代码，新增 <Outlet> 占位：

import { useParams, Outlet } from "react-router-dom";

const Layout = () => {
  const params = useParams();
  console.log(params); // 访问/10时可正常拿到 {id: "10"}
  return(
    <div>
      Hello World
      {/* 子路由内容会渲染在Outlet位置 */}
      <Outlet />
    </div>
  );
}

方案2：手动匹配路径

如果不想调整现有路由结构，可以用useMatch钩子手动匹配对应路径读取参数：

import { useMatch } from "react-router-dom";

const Layout = () => {
  const matchResult = useMatch("/:id");
  const params = matchResult?.params || {};
  console.log(params); // 访问/10时可正常拿到 {id: "10"}
  return(
    <div>
      Hello World
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Abdullah Al Shahariar