How to change a useless repetition of the route?

Here is my piece of code.
<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>


This part of code is always repeated. There is no way to reduce this reactive react router ?

just not this version

<Switch>
 <Route exact path="/" component={Home} />
 <Route path="/:letter/xx/xxx/:feeros" component={About} />
</Switch>
March 25th 20 at 12:40
1 answer
March 25th 20 at 12:42
Solution
For example:
<Route path="/(A|B|C|D)/xx/xxx/:feeros" component={About} />

In fact, it is possible to abstract and concrete values.
@gretchen.Strosin to abstract ? what is the meaning of package - tony_Dickens commented on March 25th 20 at 12:45
@tony_Dickens, for example:
<Route path="/([a-zA-Z])/xx/xxx/:feeros" component={About} />

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

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


You can use another regular expression.
Moreover, you can use regular expressions for parameters:

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

Will coincide with the routes with values feeros of the two figures:

'/A/xx/xxx/11'
'/s/xx/xxx/21'
'/F/xx/xxx/45'
- gretchen.Strosin commented on March 25th 20 at 12:48
@gretchen.Strosin, like your option not working - tony_Dickens commented on March 25th 20 at 12:51
@tony_Dickensworks. You have component x error. Correctly so:
const x = ({ match }) => {
console.log(match.url);
 return <div>{match.url}</div>;
};


If not worked, then you would have seen on page number 3. - gretchen.Strosin commented on March 25th 20 at 12:54
@gretchen.Strosin, interesting didn't know - tony_Dickens commented on March 25th 20 at 12:57
@gretchen.Strosin, are You sure that your version is the norm? - dell commented on March 25th 20 at 13:00
@dell, all variants represented here are the norm. If you need to handle four specific route(A|B|C|D) and output them to the same information, feel free to use.
If you still need to catch the parameter, but the values can only be A|B|C|D, we can write:

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


You have two options:

const { letter, feeros } = match.params;

letter can only be: "A", "B", "C" or "D" - gretchen.Strosin commented on March 25th 20 at 13:03
@gretchen.Strosin, ok - dell commented on March 25th 20 at 13:06

Find more questions by tags React