Question

我面临的情况是我的路由器正常工作，具有以下配置：

<Route path="/" component={Blog}>
    <Route path="list(/:category)(/:subcat)" component={ArticleList} />
    <Route name="article/:category(/:subcat)/:id" component={ArticlePage} />
</Route>

但是现在我被要求改进URL并从URL中删除一些“不必要的”前缀

当前网址 - ＆gt;所需网址

blog / list / football / worldcup - ＆gt;博客/足球/世界杯

blog / list / football - ＆gt;博客/足球

blog / article / football / 10 - ＆gt; blog / football / 10

所以我尝试改变路线以保持所有参数可选

，但未成功

<Route path="/" component={Blog}>
    <Route path="(/:category)(/:subcat)" component={ArticleList} />
    <Route name=":category(/:subcat)/:id" component={ArticlePage} />
</Route>

有没有办法匹配使用反应路由器描述的网址？

Answer 1

你可以像这样

<Route path="blog" component={Blog}>
  <IndexRoute component={ BlogComponent } />
  <Route path=":category" component={ ArticleCategoryList } />
  <Route path=":category/:subcat" component={ ArticleSubCategoryList } />
</Route>

我在路线上加了blog前缀。

IndexRoute将匹配 / blog 路由，它将充当索引路径。
:category将匹配博客/足球或博客/任何运动
:category/:subcat将匹配 blog / football / worldcup 和 blog / football / 10

您必须小心谨慎，因为这与subcategory和id都匹配。您可以编写一个函数/中间件，它可以验证路由的类型..无论是id还是子类别。

React Router与所有可选参数都不匹配

1 个答案: