如何使用React-Router打开单个产品的详细信息

时间:2019-04-20 14:54:05

标签: reactjs react-router

我有一个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>
  );
};

1 个答案:

答案 0 :(得分:0)

这是因为您在/ male / hat路由上使用“精确”,并且单击Hat组件中的产品会将路由更改为/ male / hat以外的其他路由,因此不再显示Hat。您必须显示Hat,因为Hat可以显示产品价格。如果删除精确,则单击产品将显示产品的价格。此处的示例:https://codesandbox.io/s/y247880319?fontsize=14