Good day, I'm having problems with the latest react-router-dom v6, I still learning the new version. Please help.

import React from 'react'

function Bookingscrren({match}) {
  return (
    <div>
        <h1>Booking Page</h1>
        <h1>Room id = {match.useParams.roomid}</h1>

    </div>
  )
}

export default Bookingscrren

Browser Output Error:

Please be kind :) I'm new

CodePudding user response：

That's not the right way of using useParams. All of these functions that begin with use, or react hooks, are just those, functions. That means you call them to get access to their functionality.

import React from 'react'

function Bookingscrren() {
const params = useParams();
  return (
    <div>
        <h1>Booking Page</h1>
        <h1>Room id = {params.roomid}</h1>

    </div>
  )
}

The return value of useParams is an object with parameters. You can access each one with the . operator.

CodePudding user response：

Welcome to this site! Use "?" operator when you navigate inside objects. I paste here the link for documentation (Chain Operator) Fast example: a?.b?.c

Anyway print the "match" contents and see if useParams properties there is inside.

If you want use router-dom useParams like this:

import {
  ...
  useParams
} from "react-router-dom";

let { id } = useParams(); //This is the hook

CodePudding user response：

By reading the name, useParams you can grasp this concept that you're facing a hook. So use useParams to get the route parameters. Example:

function Bookingscreen() {
  const {id} = useParams()

  return (
    <div>
        <h1>Booking Page</h1>
        <h1>Room ID = {id}</h1>

    </div>
  )
}