Question

我在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中显示非空值时显示过滤器。当前我的组件工作但我必须默认显示URL中的每个单独的过滤器，这会导致我的URL非常长。我认为可行的唯一方法是对过滤器中所有可能的URL进行排列组合，并将它们全部导向{Products}，这非常愚蠢。路由器组件中必定存在我缺少的东西吗？

Answer 1

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

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

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

您可以在此处详细了解：React Router with optional path parameter

URL中的ReactJS值始终可见

1 个答案: