React Router中Link的state参数无法传递至路由页面问题

运行提供的React Router代码后，Test02页面无法获取到传递的docId，仅显示默认值“Default Doc ID”，以下是问题分析及解决方案：

代码展示 #

App.js

import { Route, Routes } from "react-router-dom";
import Test01 from "./Test01";
import Test02 from "./Test02";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Test01 />} />
      <Route path="/test02" element={<Test02 />} />
    </Routes>
  );
}

export default App;

Test01.js

import React from "react";
import { Link } from "react-router-dom";

function Test01() {
  const pathname = "/test02";
  const docId = "12345";

  return (
    <div>
      <Link to={{ pathname: pathname, state: { docId: docId } }}>
        Go to target page with docId
      </Link>
    </div>
  );
}

export default Test01;

Test02.js

import React from "react";
import { useLocation } from "react-router-dom";

function Test02() {
  const location = useLocation();
  const docId = location.state?.docId || "Default Doc ID";

  return (
    <div>
      <h1>Target Page</h1>
      <p>Doc ID: {docId}</p>
    </div>
  );
}

export default Test02;

问题原因 #

核心问题是缺少路由上下文的包裹：React Router v6中，所有路由相关组件（Routes、Route、Link、useLocation等）必须在BrowserRouter（或其他Router类型，如HashRouter）的上下文环境中才能正常工作。如果没有包裹，useLocation无法获取到包含state的路由对象，自然读取不到传递的docId。

解决方案 #

在项目的入口文件（通常是index.js）中导入BrowserRouter，并用它包裹App组件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

添加这个包裹后，Link传递的state就能被useLocation正常读取，Test02页面会正确显示Doc ID: 12345。

内容的提问来源于stack exchange，提问作者Ham Dong Kyun