React Router Dom中能否通过Link组件传递Props至目标组件？

在React Router Dom中，可以通过Link组件传递数据到目标路由组件，但你当前直接给Link添加自定义属性的写法无法实现需求。以下是两种常用的正确实现方式：

方法一：通过state传递（不暴露在URL中） #

这种方式将数据存在路由的state对象里，不会显示在URL上，适合传递不需要公开的内容，但页面刷新后数据会丢失（存储在内存中）。

发送数据（App组件） #

function App(){
    const test = "Hello"
    return(
        <Link to={{ pathname: "/detail", state: { test } }}> detail </Link>
    )
}

接收数据（Detail组件） #

使用useLocation钩子获取路由状态：

import { useLocation } from 'react-router-dom';

// 注意组件名首字母大写，符合React规范
function Detail(){
    const location = useLocation();
    // 用可选链操作符避免state为空时抛出错误
    const test = location.state?.test;
    return(
        <p>{test}</p>
    )   
}

方法二：通过URL参数传递（URL可见，刷新不丢失） #

适合传递需要在URL中展示的简单数据，刷新页面后数据不会丢失，但仅支持字符串类型，复杂数据需要先序列化。

第一步：配置带参数的路由 #

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

// 路由配置中定义参数:test
function AppRoutes() {
  return (
    <Routes>
      <Route path="/detail/:test" element={<Detail />} />
    </Routes>
  );
}

发送数据（App组件） #

function App(){
    const test = "Hello"
    return(
        <Link to={`/detail/${test}`}> detail </Link>
    )
}

接收数据（Detail组件） #

使用useParams钩子获取URL参数：

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

function Detail(){
    const { test } = useParams();
    return(
        <p>{test}</p>
    )   
}

注意事项 #

1. 组件名必须首字母大写（如Detail而非detail），这是React的强制规范，避免与原生HTML标签混淆。
2. 若传递复杂对象，用state方式时可直接传入对象；用URL参数方式则需要先通过JSON.stringify()序列化，接收后用JSON.parse()解析。

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