Get route parameters in React-CodePudding

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

CodePudding user response：

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

CodePudding user response：

You can use withRouter to accomplish this. Simply wrap your exported classed component inside of withRouter and then you can use this.props.match.params.id to get the parameters

import withRouter from react router

import { withRouter } from "react-router";

wrap your class component with withRouter

import React from "react";

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

export default withRouter(Chat)

for react router v6 use custom wrapper

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

react router v6 withRouter

CodePudding user response：

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