how to create dynamic route in react js with one component code example

Example 1: set dynamic route in link react js

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

Example 2: react router dynamic routes

<Route path="/:id" render={(props) => (<Component {...props} />)} />
  
  // or

<Route path="/:id" component={Component} />