Dynamically create React Routes Using Data From Component State - reactjs

Question

I am trying to dynamically create routes using react-router-dom. The route will depend on the id of a state I have in one of my components. How can I achieve this?
App.js:
function App() {
return (
<div className="App">
<Router>
<Route path="/" component={Categories}></Route>
<Route path="/:cat" component={Recipes}></Route>
</Router>
</div>
);
}
Categories.js which I want to get the id (:cat) from - the state categories has an id value:
class Categories extends React.Component {
state = {
categories: []
}
componentDidMount() {
fetch('http://localhost:8000/api/categories/')
.then(response => response.json())
.then(data => {
this.setState({categories: data});
});
}
render() {
return (
);
}
}
I have seen others use useParams but I can't do that since Categories is a class.
Thank you for the help.

Answer 1

Use
this.props.match.params
i.e:
import { BrowserRouter, Route, Router, Switch } from "react-router-dom";
import React from "react";
function App() {
return (
<div className="App">
<p>R</p>
<BrowserRouter>
<Switch>
<Route path="/categories/:id" component={Recipes}></Route>
<Route path="/" component={Categories}></Route>
</Switch>
</BrowserRouter>
</div>
);
}
class Categories extends React.Component {
state = {
categories: []
};
componentDidMount() {
fetch('http://localhost:8000/api/categories/')
.then(response => response.json())
.then(data => {
this.setState({categories: data});
});
}
render() {
return (
<div>
{this.state.categories.map((c) => (
<div>CAT: {c.name}</div>
))}
</div>
);
}
}
class Recipes extends React.Component {
state = {};
componentDidMount() {
console.log('Params:',this.props.match.params)
}
render() {
return <div></div>;
}
}
export default App;