Как изменить бесполезный повтор маршрута?

Question

[Durin Qurkingo]

Вот мой кусок кода.

<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>

Эта часть кода всегда повторяется. Нет способа уменьшить этот реагирующий react router ?

только не этот вариант

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

Answer 1

[Антон Спирин]

Например:

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

На самом деле, можно абстрагироваться и от конкретных значений.

Comments

[Shakir Darion]

Антон Спирин абстрагироваться ? каком смысли пакажи

[Антон Спирин]

Shakir Darion, например так:

<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} />

Совпадет с маршрутами со значениями feeros из двух цифр:

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

[Shakir Darion]

Антон Спирин, вроде ваш вариант не работает

[Антон Спирин]

Shakir Darion, работает. У вас в компоненте x ошибка. Правильно так:

const x = ({ match }) => {
  console.log(match.url);
  return <div>{match.url}</div>;
};

Если бы не работало, то вы бы видели на странице цифру 3.

[Shakir Darion]

Антон Спирин, интересно не знал

[Durin Qurkingo]

Антон Спирин, Вы уверены что ваш вариант считается нормой?

[Антон Спирин]

Durin Qurkingo, все варианты представленные тут являются нормой. Если вам надо обрабатывать четыре конкретных маршрута(A|B|C|D) и выводить для них одну и ту же информацию, то смело используйте.
Если все-таки надо перехватывать параметр, но значения могут быть только A|B|C|D, то можно написать так:

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

У вас будет два параметра:

const { letter, feeros } = match.params;

letter при этом может быть только: "A", "B", "C" или "D"

[Durin Qurkingo]

Антон Спирин, ok