到达路由器未显示匹配 url 的正确组件

问题描述

通过以下内容，我可以导航到 /shop/、/shop/dept1/、/shop/dept2/，并查看我希望看到的组件。

当我尝试导航到 /shop/dept1/?option=... 时，我仍然只能看到 DeptOne 组件，而不是 PLP 组件。我几乎肯定我过去做过类似的事情，但这次似乎无法复制。

<Router basepath='/shop'>
    <Shop path='/' />
    <DeptOne path='/dept1/' />
    <DeptTwo path='/dept2/' />
    <PLP path='/dept1/*' />
    <PLP path='/dept2/*' />
</Router>

解决方法

URL 查询参数（? 之后的键值对）不是路径的一部分。所以对于 /shop/dept1/?option=...，路径仍然是 /shop/dept1/。

这意味着路径 /shop/dept1/ 的组件必须处理查询参数。可以通过 location 对象在组件中访问查询参数，该对象是 Router (https://reactrouter.com/web/api/location) 的道具。

例如，您可以制作一个包装组件：

const WrapperComponent = ({ match,location }) => {
  return (
    <>
      <DeptOne />
      {location.search == ""
        ? null
        : <PLP queryParams={location.search}>
      }   
    </>
  );
}

queryParams 属性是一个以 ? 开头的字符串。因此，如果路径为 /shop/dept1/?option=...，则 queryParams 将为 ?option=...。