Как открыть детали одного продукта, используя React Router?

Question

[miliko mikoyan]

У меня есть компонент Nav, он имеет две ссылки. Первая ссылка ведет на главную страницу, а вторая открывает компонент Hat. В свою очередь, он отправляет запрос на сервер и получает массив объектов, представляющих список товаров, при нажатии на которые должна открыться страница с ценой этого товара. моя 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>
  );
};

Предположим, что я нажимаю на первую ссылку, я ожидаю, что увижу только цены на продукты и ссылки Foo hat. Я не могу написать этот код, но я могу показать на картинке

Answer 1

[Антон Спирин]

Шаг 1. Изменяем роутер:

<Switch>
  <Route path={"/"} exact render={() => <div>'100'</div>} />
  <Route path={"/male/hat"} exact component={ProductsList} />
  <Route path={"/male/hat/:to"} exact component={ProductDetails} />
</Switch>

Шаг 2. Пишем компонент для детализации:

const ProductDetails = ({ match }) => {
  const { to } = match.params;
  const [state, setState] = useState({ isFetching: true, hat: null });
  const { isFetching, product } = state;  

  useEffect(() => {
    (async () => {
      await fetch(`https://foo0022.firebaseio.com//male/hat.json`)
        .then(res => res.json())
        .then(data => {
          const product = data.find(item => item.to === to);
          setState({ isFetching: false, product });
        });
    })();
  }, []);
  
  if (isFetching) return <div>...Loading</div>;

  if (!product) return <div>404: Product not found</div>;

  return (
    <div>
      <h1>{product.title}</h1>
      <h2>{product.price}</h2>
    </div>
  );
}

Шаг 3. Изменяем компонент списка:

const ProductsList = () => {
  const [state, setState] = useState({ isFetching: true, products: [] });
  const { isFetching, products } = state;

  useEffect(() => {
    (async () => {
      await fetch(`https://foo0022.firebaseio.com//male/hat.json`)
        .then(res => res.json())
        .then(data => setState({ isFetching: false, products: data });
    })();
  }, []);
  
  if (isFetching) return <div>...Loading</div>;
  
  return (
    <ul>
      {products.map(({ to, title }) => (
          <li key={to}>
            <Link to={`/male/hat/${to}`}>{title}</Link>
          </li>
      ))}
    </ul>
  );
};

Comments

[miliko mikoyan]

как я понимаю без 2 запросу никак нельзя всё это сделать?. И спасибо за хороший Код.

[Антон Спирин]

miliko mikoyan, ну смотрите. На самом деле можно. Просто в реальных приложениях на странице товара, обычно делают запрос за одним товаром. Ваш API, насколько я понял, пока такого не позволяет.
Так то, вы можете вынести fetch в корень приложения и делать эту загрузку один раз. Но для коммерческих приложений, в большинстве случаев такой вариант не подойдет.)

[miliko mikoyan]

Антон Спирин, Ok Спасибо