在React中获取路由参数[重复]

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

import React from "react";

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

如果我使用它，我只会得到一个白色网站和以下错误：

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)

我怎样才能让它发挥作用？ 没有教程或谷歌搜索有效。

(我使用react-router-dom v6)

我建议使用useParams此用例的钩子。不过，您必须使用功能组件。它最终会看起来像这样：

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

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

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