在React中获取路由参数

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}
</>
)
}
}

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

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路由器dom v6(

Answer 1

对于这个用例，我建议使用useParams钩子。不过，您必须使用一个功能组件。结果会是这样的：

import React from 'react';
import { useParams } from 'react-router';
export default function Chat() {
const params= useParams()
return <>{params.id}</> 
}

Answer 2

react-router@v6文档提供包装

// 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

那就用

import React from "react";
import withRouter from './withRouter';
export default withRouter(class Chat extends React.Component {
render() {
return (
<>
{this.props.router.params.id}
</>
)
}
})

Answer 3

您可以使用withRouter来实现这一点。只需将导出的分类组件包装在withRouter中，然后您就可以使用this.props.match.params.id来获取参数

使用路由器从react路由器v5 导入

import { withRouter } from "react-router";

使用路由器包装您的类组件

import React from "react";
class Chat extends React.Component {
render() {
return (
<>
{this.props.match.params.id}
</>
)
}
}
export default withRouter(Chat)

对于react路由器v6，使用自定义包装

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;
}

反应路由器v6与路由器