Как исправить роутинг, чтобы все отображалось верно?

Question

[Fosol]

Ссылка страницы меняется, но дело в том, что отображается сразу все. А должно отображаться, к примеру 'this page is 1' для id = 1, 'this page is 2' для id = 2 и так далее. Как исправить мой код, чтобы все работало верно?

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

Answer 1

[0xD34F]

{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>