match.params.id works in react-router-dom version5 but not in version 6

user_14890609 0
Viewed 368

Whats the proper way to get this functionality in react-router version 6 When i console.log match it show undefined, but it works fine in 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
react-router reactjs javascript
1 Answers

You need to use useParams hook in the component like below. I assume your path is /: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
user_33720500
Related