У меня есть компонент Nav, он имеет две ссылки.Первая ссылка ведет на главную страницу, а вторая открывает компонент Hat.В свою очередь, он отправляет запрос на сервер и получает массив объектов, представляющих список товаров, при нажатии на которые должна открываться страница с ценой этого товара. my cod
const Nav = () => {
return (
<Router>
<NavLink to={"/"}>{"Foo"}</NavLink>
<NavLink to={"/male/hat"}>{"hat"}</NavLink>
<Switch>
<Route path={"/"} exact render={() => <div>'100'</div>} />
<Route path={"/male/:hat"} exact render={() => <Hat />} />
</Switch>
</Router>
);
};
const Hat = () => {
const [arrProd, setArrProd] = useState([]);
useEffect(() => {
(async () => {
await fetch(`https://foo0022.firebaseio.com//male/hat.json`)
.then(res => res.json())
.then(arr => setArrProd(Object.values(arr).flat()));
})();
}, []);
console.log(arrProd);
return (
<Fragment>
{arrProd.map(({ to, id, price, title }) => (
<Fragment key={id}>
<br />
<NavLink to={`/male/hat/${to}`}>{title}</NavLink>
<Route
exact
path={`/male/hat/${to}`}
render={() => <div>{price}</div>}
/>
</Fragment>
))}
</Fragment>
);
};