React中如何获取路由的URL参数？附代码示例

你当前的问题是因为使用的是React Router v6版本，该版本已不再通过组件props传递match对象，所以解构{match}得到的是undefined，自然无法通过match.params.name获取参数。

解决方法是使用React Router v6提供的useParams钩子：

1. 首先在SortingTable组件中导入useParams
2. 调用useParams()获取路径参数对象，从中解构出name

修改后的SortingTable组件代码如下：

import { useParams, useSearchParams } from 'react-router-dom';
import { useState } from 'react';

const SortingTable = () => {
    let [searchParams, setSearchParams] = useSearchParams();
    const [data, setData] = useState([]);
    const [columns, setColumns] = useState([]);
    
    // 获取URL路径中的name参数
    const { name } = useParams();
    console.log(name); // 现在可以正确拿到参数值

    // 后续业务逻辑代码...
};

额外提示：你的路由路径/table/:name/末尾带有斜杠，需要确保访问的URL是/table/xxx/格式（带末尾斜杠）才能匹配。如果想兼容/table/xxx和/table/xxx/两种格式，可以把路由路径修改为/table/:name（去掉末尾斜杠）。

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