Прежде всего, вы визуализируете несколько Switch компонентов, когда визуализируете маршруты, повторяя this.state.cards. Решение состоит в том, чтобы просто переместить компонент Switch за пределы возвращаемого значения в this.state.cards.map(() => {...}).
Вам не нужно l oop над массивом card для создания компонентов Route если вы хотите, чтобы они совпадали по пути api/events/:id. Если по какой-то причине вам нужны только три компонента Route с путями /api/events/1, /api/events/2 и api/events/3, вам даже не нужно сопоставлять их по api/events/:id, вы можете просто l oop поверх массива карт и вернуть компонент Route с помощью path={"/api/events/"+id}
import React from "react";
import "./styles.css";
import Main from "./Main";
import Description from "./Description";
import { Link, Route, BrowserRouter, Switch } from "react-router-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
card: [1, 2, 3]
};
}
render() {
return (
<BrowserRouter>
<div>
<Switch>
<Route exact path="/">
{this.state.card.map(id => {
return (
<Link to={"/api/events/" + id}>
<Main number={id} />
</Link>
);
})}
</Route>
<Route path="/api/events/:id" component={Description} />
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
Вам не нужно передавать id как опору в компонент Description, если вы решите отображать маршруты, соответствующие имени пути /api/events/:id. Вы можете использовать match.params, чтобы получить идентификатор. См. коды и для демонстрации.