Как сделать переход на отдельные страницы товара без бэка?

Question

[Deadorik]

Всем привет. Нужно что бы при клике на карточки товаров открывались отдельные страницы. С бэком я это делал через передачу id в параметры запроса и забирал инфу для конкретной страницы. Как сделать без бэка?

Пытаюсь мапить стейт и отрисовывать на каждую карточку свою страницу, но мапится только первый объект и информация во всех карточках товаров одна и та же.

Пример:

import './App.css';
import {BrowserRouter, Route, Routes} from "react-router-dom";
import Main from "./pages/Main";
import InfoProduct from "./pages/InfoProduct";
import PageError from "./pages/PageError";
import {useSelector} from "react-redux";


function App() {
    const cards = useSelector(state => state.getCard.items)
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Main/>}></Route>
                {cards.map(item=><Route path="products/:id" element={<InfoProduct props={item}/>}></Route>)}
                <Route path="*" element={<PageError/>}></Route> 
            </Routes>
        </BrowserRouter>
    );
}

export default App;

Answer 1

[Marshall_s]

Ваш код может заработать, если немного изменить рендрер роутов:

// Какой-то стейт
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