在 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 (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)

Answer 1

您可以使用 withRouter 来完成此操作。只需将导出的 classed 组件包装在 withRouter 中，然后就可以使用 this.props.match.params.id 获取参数

从 React 路由器导入 withRouter

import { withRouter } from "react-router";

用 withRouter

包装你的 class 组件

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 withRouter

Answer 2

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

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

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

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

Answer 3

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

在 React 中获取路由参数

Get route parameters in React

javascript

reactjs

react-router

react-router-dom