How to create dynamic routes with react-router-dom?

• Use Link to dynamically generate a list of routes.
• Use : to indicate url params, :id in the case
• Use the match object passed as props to the rendered route component to access the url params. this.props.match.params.id

<BrowserRouter>
  /* Links */
  {heroes.map(hero => (<Link to={'heroes/' + hero.id} />)}

  /* Component */
  <Route path="heroes/:id" component={Hero} />
</BrowserRouter>

class Hero extends Component {
  render() {
    return (
      <div>
        {this.props.match.params.id}
      </div>
    );
  }
}

To do this you simply add a colon before the url part that should be dynamic. Example:

<BrowserRouter>
  {/* Dynamic Component */}
  <Route path="heroes/:id" component={Hero} />
</BrowserRouter>

Also you can use the useParams hook from react-router-dom to get the dynamic value for use in the page created dynamically. Example:

import { useParams } from "react-router-dom";

const Hero = () => {

    const params = useParams();
    // params.id => dynamic value defined as id in route
    // e.g '/heroes/1234' -> params.id equals 1234

    return (...)
}