reactjs - 路由器 router dom v 6 中没有与位置 "/cart"匹配的路由

Question

当我console.log qty时(在下面的代码中)，我看到 No routes matched location "/cart" (来自浏览器控制台)而不是 qty 的值。在react-router-dom v5中，通过将位置作为 Prop 传递给组件，一切都可以正常工作，但这在v6中不起作用。以下代码块在 router-dom v5 中工作:

export function CartScreen({ match, location, history}) {
    const qty = location.search ? Number(location.search.split("=")[1]): 1

    console.log('qty:', qty)


    return (
        <div>
            <h1>Add to CART</h1>
        </div>
    )
}

添加到购物车处理程序:

const addToCartHandler = () =>{
        history(`/cart/${match.id}?qty=${qty}`)
    }

<Button type='button' onClick={addToCartHandler} > Add To Cart </Button>

但是，上面的代码在 router-dom v6 中无效，因此我尝试将其更改为下面的代码以达到相同的结果(但它不起作用):

const CartScreen = () => {
    const match = useParams()
    const location = useLocation();
    const productID = match.id
    const qty = location.search ? Number(location.search.split("=")[1]): 1

    console.log('qty:', qty)


    return (
        <div>
            <h1>Add to CART</h1>
        </div>
    )
}

App.js

function App() {
    return (
    <Router>
      <Routes>
          <Route path='/cart/:id?' element={<CartScreen/>} />
      </Routes>
    </Router>
  );
}

export default App;

主要问题在于我使用location的方式在路由器 dom v 6 中。

Answer 1

react-router-dom v6 不像 v5 那样在路径中使用 REGEX。如果您想使用“可选”路径段，那么您需要为每个要匹配的路径/路径呈现显式路由/路径。

<Router>
  <Routes>
    <Route path="/cart/:id" element={<CartScreen />} />
    <Route path="/cart" element={<CartScreen />} />
  </Routes>
</Router>

您仍然可以使用 location 对象来访问搜索查询字符串。

const { search } = useLocation();
const qty = search ? Number(search.split("=")[1]) : 1;

但是代码假设“qty”是第一个搜索参数。

v6 引入了用于访问 queryString 的 useSearchParams Hook 。

const [searchParms] = useSearchParams();
cont qty = Number(searchParms.get("qty"));

代码:

const CartScreen = () => {
  const { id } = useParams();
  const { search } = useLocation();
  const [searchParms] = useSearchParams();

  const productID = id;
  const qty = search ? Number(search.split("=")[1]) : 1;

  console.log({ productID, qty, qtyParam: Number(searchParms.get("qty")) });

  return (
    <div>
      <h1>Add to CART</h1>
    </div>
  );
};

控制台日志:{productID: "123", qty: 23, qtyParam: 23}