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

【问题标题】：Reach Router not showing correct component for matched url到达路由器未显示匹配 url 的正确组件
【发布时间】：2021-01-27 19:37:03
【问题描述】：

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

【问题讨论】：

标签： reactjs reach-router

【解决方案1】：

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

这意味着路径/shop/dept1/ 的组件必须处理查询参数。查询参数可以通过location对象在组件中访问，该对象是Router的一个prop (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。

【讨论】：