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
```javascript
import { withRouter } from "react-router";
```
wrap your class component with withRouter
```javascript
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
```javascript
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](https://reactrouter.com/docs/en/v6/faq)
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
```javascript
import { withRouter } from "react-router";
```
wrap your class component with withRouter
```javascript
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
```javascript
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](https://reactrouter.com/docs/en/v6/faq)
