How to change useless repeat Route

Use Route Params.

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

On the component side you can grab the parameter value:

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

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

If you need to handle four specific routes (A | B | C | D);

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

If you still need to intercept the parameter, but the values ​​can only be A | B | C | D, then you can write this:

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

You will have two parameters:

const { letter, feeros } = match.params;

letter can only be: "A", "B", "C" or "D"

You can use another regular expression.

for example so:

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

The route will work for one Latin letter, for example:

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

Moreover, you can use regular expressions for parameters:

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

Matches routes with two-digit feeros values:

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