How to fix the routing so that everything is displayed correctly?

Question

React

The link of the page changes, but the fact is that everything is displayed at once. And it should be displayed, for example, 'this page is 1' for id = 1, 'this page is 2' for id = 2, and so on. How can I fix my code so that everything works correctly?

https://codesandbox.io/s/naughty-buck-94x6y?file=/...

Answer 1

{this.state.card.map(id => (
  <Link to={`/api/events/${id}`}>
    <Main number={id} />
  </Link>
))}
<Switch>
  <Route
    path="/api/events/:id"
    render={props => <Description number={props.match.params.id} />}
  />
</Switch>