React Router如何在组件间传递路由参数 useParams返回undefined如何解决

问题原因 #

你的路由参数命名和useParams解构的命名不一致：

• App.js中路由定义的动态参数名为id（/tableData/:id）
• TableData组件中尝试从useParams解构serial_number，两者命名不匹配自然无法获取到值，返回undefined。

解决方法（二选一即可） #

方法1：修改路由参数命名 #

将App.js中对应路由的参数名改为serial_number，匹配你组件里的解构名：

// App.js 改动部分
<Route path="/tableData/:serial_number" component={TableData}></Route>

修改后无需调整TableData组件的代码，即可正常获取到序列号值。

方法2：修改组件中解构的参数名 #

保持路由配置不变，将TableData组件里的解构名改为和路由一致的id，也可以直接重命名为你需要的变量名：

// TableData 改动部分
import { useParams } from 'react-router-dom';

const TableData = () => {
    const { id: serial_number } = useParams();
    console.log(serial_number);

    return (
        <div>Table Data - {serial_number}</div>
    );
}

拓展：需要传递更多行数据的场景 #

如果后续需要把整行的姓名、日期等其他数据也传到目标组件，可以用history.push的第二个参数携带状态数据，不需要全部拼在路由路径里：

// Table组件的tableDataPage方法修改
const tableDataPage = (value) => {
    history.push(
        `/tableData/${value.serial_number}`,
        { rowData: value } // 第二个参数为要传递的状态数据
    )
};

在目标组件用useLocation钩子接收即可：

// TableData组件新增逻辑
import { useParams, useLocation } from 'react-router-dom';

const TableData = () => {
    const { id: serial_number } = useParams();
    const location = useLocation();
    const { rowData } = location.state; // 拿到整行的所有数据
    console.log(rowData.name, rowData.date); // 可以直接使用其他字段

    return (
        <div>
            <p>Table Data - {serial_number}</p>
            <p>申请人：{rowData.name}</p>
            <p>申请日期：{rowData.date}</p>
        </div>
    );
}

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