match.params.id 在 react-router-dom 版本 5 中有效，但在版本 6 中无效

Question

在 react-router 版本 6 中获得此功能的正确方法是什么 当我 console.log 匹配时，它显示未定义，但在 v5 中可以正常工作

import React from 'react'

const NotePage = ({ match }) => {

    let noteId = match.params.id


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

export default NotePage

Answer 1

您需要在组件中使用useParams 挂钩，如下所示。我假设你的路径是/:id

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

const NotePage = () => {

    const { id: noteId } = useParams()

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

export default NotePage