Cartitems应用程序没有匹配的路线

Question

使用React-Router-Dom V6在我的应用中维护“购物车项目”功能存在路由问题。 因此，当我单击标题Navbar中的“购物车”链接时，它不会显示购物车项目。 相比之下，当我尝试在购物车中添加新项目时，它可以工作并显示列表。

注意：当URL路径是这样的模式'http：// localhost：3000/cart/1？qty = 2'时，它显示了购物车项目，并且在'http：// localhost：3000/cart'！

请按照代码...

app.js

Answer 1

看来您希望cartscreen组件都可以在“/cart/：productid” path上呈现（在更新购物车的情况下） 和 在“/cart”路径上也是在查看购物车时。

为此，您需要为每个渲染路由。在这里，我在path =“/cart”上构建了一个布局路由，该路由呈现两个嵌套路由：索引路由cartscreen on ''。代码>和另一个cartscreen “：productid”。

<Routes>
  <Route path="/" element={<HomeScreen />} />
  <Route path="/product/:id" element={<ProductScreen />} />
  <Route path="/cart">
    <Route path=":productid" element={<CartScreen />} />
    <Route index element={<CartScreen />} />
  </Route>
</Routes>

注意：如果需要，您可以同样地渲染两条路线。

<Routes>
  <Route path="/" element={<HomeScreen />} />
  <Route path="/product/:id" element={<ProductScreen />} />
  <Route path="/cart:productid" element={<CartScreen />} />
  <Route path="/cart" element={<CartScreen />} />
</Routes>

Cartscreen应以更React> React-Router-dom@6方式处理Querystring。而不是使用USELocation挂钩访问location.search属性，然后应用一些“字符串逻辑”，而是使用 useearchparams 钩直接访问searchParams对象，并获取所需的确切查询参数值。

例子：

const CartScreen = () => {
  const { productid } = useParams();
  const [searchParams, setSearchParams] = useSearchParams();
  const dispatch = useDispatch();
  const { cartItems } = useSelector((state) => state.cart);

  const qty = searchParams.get("qty") || 1;

  useEffect(() => {
    if (qty) {
      // update cart state
      dispatch(addToCart(productid, qty));

      // clear qty queryString param, then "navigate"
      searchParams.delete("qty");
      setSearchParams(searchParams);
    }
  }, [dispatch, productid, qty, searchParams, setSearchParams]);

  return (
    <Row>
      <Col md={8}>
        {!cartItems.length ? (
          <Message variant="info">
            Go Back To Home Page <Link to="/"></Link>
          </Message>
        ) : (
          <ListGroup>
            {cartItems.map((x) => (
              <ListGroup.Item key={x.product}>
                {x.name} , {x.qty}
              </ListGroup.Item>
            ))}
          </ListGroup>
        )}
      </Col>
      <Col md={4}></Col>
    </Row>
  );
};