Get route parameters in React

user_18195740 0
Viewed 454
<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)

react-router-dom react-router reactjs javascript
3 Answers

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 v5

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

user_148135770

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

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