如何更改无用的重复路线

Question

我是第一次使用react-router。

这是我的代码。

 <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/A/xx/xxx/:feeros" component={About} />
    <Route path="/B/xx/xxx/:feeros" component={About} />
    <Route path="/C/xx/xxx/:feeros" component={About} />
    <Route path="/D/xx/xxx/:feeros" component={About} /> 
  </Switch>

这部分<Route path="//xx/xxx/:feeros" component={About} />代码总是重复的。有没有办法减少这个反应路由器？

Answer 1

如果您需要处理四个特定路线（A | B | C | D）；

<Route path="/(A|B|C|D)/xx/xxx/:feeros" component={About} />

如果仍然需要拦截参数，但是值只能是A | |。B | C | D，那么你可以这样写：

<Route path="/:letter(A|B|C|D)/xx/xxx/:feeros" component={About} />

您将有两个参数：

const { letter, feeros } = match.params;

字母只能是：“ A”，“ B”，“ C”或“ D”

您可以使用其他正则表达式。

例如：

<Route path="/([a-zA-Z])/xx/xxx/:feeros" component={About} />

该路线适用于一个拉丁字母，例如：

'/A/xx/xxx/value'
'/s/xx/xxx/value'
'/F/xx/xxx/value'

此外，您可以对参数使用正则表达式：

<Route path="/([a-zA-Z])/xx/xxx/:feeros(\d{2})" component={About} />

匹配具有两位菲洛斯值的路线：

'/A/xx/xxx/11'
'/s/xx/xxx/21'
'/F/xx/xxx/45'