Get route parameters in React [duplicate]

Question

<Route path="chats/:id" element={<Chat />} />

import React from "react";

export default class Chat extends React.Component {
  render() {
    return (
      <>
        {this.props.match.params.id}
      </>
    )
  }
}

If I use this, I only get a white site and the following error:

Chat.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'params')
    at Chat.render (Chat.js:6:1)
    at finishClassComponent (react-dom.development.js:20487:1)
    at updateClassComponent (react-dom.development.js:20433:1)
    at beginWork (react-dom.development.js:22366:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
    at invokeGuardedCallback (react-dom.development.js:4270:1)
    at beginWork$1 (react-dom.development.js:27243:1)
    at performUnitOfWork (react-dom.development.js:26392:1)
    at workLoopSync (react-dom.development.js:26303:1)

How can I get this to work? No tutorial or googling worked.

(I use react-router-dom v6)

Answer 1

I'd recommend using the useParams hook for this use case. You'd have to use a functional component though. It would end up looking like this:

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

export default function Chat() {
  const params= useParams()

  return <>{params.id}</> 
}

Answer 2

react-router@v6 docs provide a wrapper

// withRouter.js
import {
  useLocation,
  useNavigate,
  useParams,
} from "react-router-dom";

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}
export default withRouter

Then just use it

import React from "react";
import withRouter from './withRouter';

export default withRouter(class Chat extends React.Component {
  render() {

    return (
      <>
        {this.props.router.params.id}
      </>
    )
  }
})