没有路由匹配位置“/cart/2?qty=%201” react router dom v6

Question

我正在尝试使用 react-router-dom v6 组织我的路由应用程序，所以当我想通过单击 ProductPage 组件内的“添加到购物车”按钮访问 CartPage 组件时，我到达一个空白页面，没有我在 CartPage 组件上制作的预期信息，这是我的代码：

the ProductPage code:

import React from "react";
import {Link, useParams, useNavigate} from "react-router-dom";
import Rating from "../components/Rating";
import {useSelector, useDispatch} from "react-redux";
import {useEffect, useState} from "react";
import {detailsProduct} from "../actions/productAction";
import LoadingBox from "../components/LoadingBox";
import ErrorBox from "../components/ErrorBox";

function ProductPage (props) {
    const dispatch = useDispatch();
    const { id } = useParams();
    useEffect(()=> {
     dispatch(detailsProduct(id));  

    }, [dispatch, id]);
    const [qty, setQty] = useState(1);
    const productDetails = useSelector((state) => state.productDetails);
    const {loading, error, product} = productDetails;
    console.log(product);
    
    const navigate = useNavigate(); 
    
    const addToCartHandler = () => {
        

        navigate(`/cart/${id}?qty= ${qty}`)
    }

            
    return (
            <div>
        {
            loading ?( <LoadingBox> </LoadingBox>) : error ?( <ErrorBox variant="danger" >{error}</ErrorBox>): (  <div>
        <Link to="/" >Back to result</Link>
           <div className="row top" >
             <div className="col-2" >
             <img className="large" src={product.images} alt={product.name} />
             </div>
             <div className="col-1" >
             <ul>
               <li>
                <h1>{product.name}</h1>
               </li>
               <li>
                <Rating rating={product.rating} numReviews={product.numReviews} ></Rating>
               </li>
               <li>
                Price: ${product.price}
               </li>
               <li>
                Description:
                <p>{product.description}</p>
               </li>
             </ul>
             </div>
             <div className="col-1" >
               <div className="card card-body" >
                    <ul>
                        
                        <li>
                          <div className="row">
                            <div>Price</div>
                            <div className="price">${product.price}</div>
                          </div>
                         </li>
                         <li>
                          <div className="row">
                            <div>Status</div>
                            <div>
                            {product.countInStock > 0 ? (<span className="success" >In stock</span>): (
                            <span className="danger">Unvailable</span>) }
                            </div>
                          </div>
                         </li>
                         {product.countInStock > 0 && (
                            <>
                            <li>
                              <div className="row" >
                               <div>Qty</div>
                               <div>
                                <select value={qty} onChange={e=> setQty(e.target.value)} >
                                {
                                  [...Array(product.countInStock).keys()].map(x=> 
                                  <option key={x + 1} value={x + 1} >{x + 1} </option>
                                  )}
                                </select>
                               </div>
                              </div>
                            </li>
                              <li> <button onClick={addToCartHandler} className="primary block" >Add to Cart</button> </li> 
                            </>
                            
                            )}
                            </ul>
               </div>
             </div>
           </div>

        </div> )}
                </div>
        
    )

};
export default ProductPage;

CartPage code:
import React from "react";
import {useParams, useSearchParams} from "react-router-dom";

const CartPage = (props) => {
    const {id} = useParams();
    const [searchParams] = useSearchParams();
    const qty = searchParams('qty');
    console.log(qty)
    return (
        <div>
          <h1>Cart Page</h1>
          <p>Add to cart : ProductId : {id} Qty: {qty}</p>
        </div>
    )
};
export default CartPage;

App.js code:
import React from "react";
import HomePage from "./pages/HomePage"
import {BrowserRouter, Routes, Route} from "react-router-dom";
import ProductPage from "./pages/ProductPage";
import CartPage from "./pages/CartPage";

function App() {
  return (
    <BrowserRouter>
    <div className="grid-container">
      <header className="row" >
        <div>
          <a href="/" className="brand" >MyShop</a>
        </div>
        <div>
          <a href="/cart">Cart</a>
          <a href="/signin">Sign In </a>
        </div>
      </header>
      <main>
      
       <Routes>
       <Route path="/cart/:id?" element={<CartPage />} />
          <Route path="/" element={<HomePage />} />
          <Route path="/product/:id" element={<ProductPage />} /> 
        </Routes>
        
    <div>
       
      </div>
      </main>
      <footer className="row center" >
        All right reserved
      </footer>
    </div>
    </BrowserRouter>
  );
}

export default App;

Answer 1

qty= ${qty}中有一个space需要删除

  navigate(`/cart/${id}?qty= ${qty}`)

将

navigate(`/cart/${id}?qty=${qty}`)

URL 是 "/cart/2?qty=%201" 但应该是 "/cart/2?qty=1" %20 因为 space

Answer 2

我认为你使用 useSearchParams 是错误的，你正在直接尝试访问查询参数，你不能那样使用 searchparams。

尝试像下面这样使用它：

const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("qty")

Answer 3

我能看到一些小问题。

购物车路线路径错误地包含尾随 "?" 字符。去掉它。尾随 "?" 是找不到路由的原因。
```
<Route path="/cart/:id" element={<CartPage />} />
```
Cart 组件错误地使用了 searchParams 对象。它必须使用 .get 方法来访问 queryString 参数的值。
```
const qty = searchParams.get("qty");
```

计算的购物车 link 中有一个 space。删除它。

const addToCartHandler = () => {
  navigate(`/cart/${id}?qty=${qty}`);
};

没有路由匹配位置“/cart/2?qty=%201” react router dom v6

No routes matched location "/cart/2?qty=%201" react router dom v6

javascript

reactjs

redux

react-router-dom