react-router-dom v6中match.params.id失效 正确获取路由参数的方式是什么

原因说明 #

react-router-dom v6 废弃了v5版本自动注入路由组件props的match、history、location对象，因此直接从props解构match会得到undefined，原有写法失效。

正确实现方式 #

使用v6提供的useParams Hook获取动态参数，修改后的代码如下：

import React from 'react'
// 导入useParams Hook
import { useParams } from 'react-router-dom'

const NotePage = () => {
    // 调用useParams解构得到对应动态参数，参数名需要和路由定义的占位符名称一致
    const { id: noteId } = useParams()

    console.log(noteId)
    return (
        <div>
            <h1>detail Note {noteId} </h1>
        </div>
    )
}

export default NotePage

注意事项 #

需要保证路由定义中的动态参数占位符名称和解构的参数名一致，路由配置示例：

<Route path="/notes/:id" element={<NotePage />} />

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