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

Question

通过以下内容，我可以导航到 /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>

Answer 1

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=....

更多信息here。

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

Reach Router not showing correct component for matched url

reactjs

reach-router