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'

Answer 2

使用Route Params。

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/:letter/xx/xxx/:feeros" component={About} />
</Switch>

在组件方面，您可以获取参数值：

componentDidMount() {
  const { match: { params } } = this.props;

  console.log(params.letter);
  console.log(params.feeros);
}

Answer 3

您可以使用以下参数进行标识：A，B，等等。

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/:id/xx/xxx/xx" component={About} />
</Switch>

如何更改无用的重复路线

3 个答案: