URL 中的 ReactJS 值始终可见答案

【问题标题】：ReactJS Values In The URL Always VisibleURL 中的 ReactJS 值始终可见
【发布时间】：2017-05-20 07:33:34
【问题描述】：

我在 ReactJS 中有一个用于我的产品的过滤系统，它基本上具有以下内容：

http://localhost:3000/category/women/subcategory/tops/sorting/null/price/null/size/null/color/null/brands/null/merchants/null

路线如下：

<Router>
    <Route path="/category/:cat/subcategory/:subCat/sorting/:sorting/price/:price/size/:size/color/:color/brands/:brands/merchants/:merchants" component={Products} />
</Router>

问题是我想在 URL 中显示过滤器，当它们的值不是 null 时。当前我的组件可以正常工作，但默认情况下我必须在 URL 中显示每个过滤器都具有空值，这导致我的 URL 非常长。我认为可能的唯一方法是对过滤器中所有可能的 URL 进行排列组合，并将它们全部定向到 { Products }，这非常愚蠢。路由器组件中一定有我遗漏的东西？

【问题讨论】：

为什么将null 放在url 中，而不是检查值并分配一些默认值，如- 如果值为null。
当然我可以将 null 更改为 all 或其他，但是否有必要在 URL 中包含它，除非它的值不是 null 或 all。
我认为，您必须这样做，因为您将所有这些都定义为 url 参数，因此要为正确的参数分配正确的值，您需要输入一些默认值或 null，否则如果您跳过该 null，下一个值将分配给错误的参数。

标签： reactjs redux react-router react-redux

【解决方案1】：

在这种情况下，您需要使用可选参数。

作为示例，如果您想同时接受sorting/ascending/price 和sorting/price，假设您使用react router v4，则可以编写如下路径。

<Router>
  <Route path="sorting/:sort?/price" component={Products} />
</Router>

您可以在此处阅读更多信息：React Router with optional path parameter

【讨论】：