Ваш код может заработать, если немного изменить рендрер роутов:
// Какой-то стейт
const cards = [
{
id: 1,
title: "Card 1",
},
{
id: 2,
title: "Card 2",
},
{
id: 3,
title: "Card 3",
},
];
Роуты:
{cards.map((card) => (
<Route
key={card.id}
path={`products/${card.id}`}
element={<InfoProduct card={card} />}
/>
))}
Компонент:
const InfoProduct = (props:) => {
const { card } = props;
return <h1>props{card.title}</h1>;
};
p.s. хардкодить роуты в любом случае так себе идея, если нет бекенда, то можно попробовать воспользоваться каким-нибудь сервисом, например
mockapi