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'