dynamic url react router 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: how to pass dynamic url in Link react

<Link to="/about">About</Link>
<Link to={`/projects/${project.id}`}>Project</Link>