路由器路由器 dom v 6 中没有与位置“/cart”匹配的路由

Posted 2023-02-19

【中文标题】路由器路由器 dom v 6 中没有与位置“/cart”匹配的路由

【英文标题】：No routes matched location "/cart" in router router dom v 6

【发布时间】：2022-01-24 03:26:27

【问题描述】：

当我 console.log qty（在下面的代码中）时，我看到 No routes matched location "/cart" （来自浏览器控制台）而不是 qty 的值。在 react-router-dom v5 中，通过将位置作为道具传递给组件，一切正常，但这在 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;

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

【问题讨论】：

这个CartScreen 是在带有id 路由参数的路由上渲染的吗？你能分享一下你是如何渲染路由和路由组件的吗？

是的，我刚刚更新了代码，请检查

好的，所以CartScreen 和id 路由参数应该没问题。什么抱怨缺少"/cart" 路线？您的路径上也不应该有尾随 "?"。

由于路径中的id是可选的，所以当指定商品数量时，就像用户点击添加到购物车时一样，数量的值应该附加到url。数量未附加到“/购物车”。问题在于 `react-router-dom 位置。我不确定如何在 v6 中实现 location.search

@Drew Reese，我想到了更好的方法来作为问题，我再次更新了帖子

【参考方案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;

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

v6 引入了一个 useSearchParams 挂钩来访问 queryString。

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

【讨论】：

非常感谢@Drew Reese。你的方法很明确。但我遇到了类似的问题。当我点击添加到购物车按钮时。请检查，我更新了帖子以包含 addToCart 按钮和处理程序

由于 react 路由器 6 不使用正则表达式，如何处理 addToCart 处理程序以匹配添加到购物车路径？我不明白您所说的单独添加到购物车部分将如何与处理程序一起使用

@C-Bizz 我怀疑它的工作方式类似于它在 RRDv5 中的工作方式。 addToCartHandler 和按钮在您的 RRDv5 实现中如何工作？

谢谢@Drew Reese。你已经回答了我问的问题。我将为我遇到的 url 路径问题打开另一篇文章。