Как исправить «точные» маршруты?

Question

Я создал новый маршрут внутри «Формы», но не могу сделать это, не затрагивая ранее созданный маршрут «Бизнес» (маршрут «Бизнес» вообще не будет отображаться). Я прочитал документацию, но не смог понять, как решить эту проблему, но я предполагаю, что это из-за двух «точных путей».

<Switch>
  <Route exact path="/"> 
    <Form />
  </Route>
  <Route path="/booking">
    <Booking />
  </Route>
</Switch>

//inside of <Form/>

<Switch>
  <Route exact path ="/"> 
    <Selection/>
  </Route>
  <Route path ="/businesses/:businessesId"> 
    <Businesses/>
  </Route>
</Switch>  

Answer 1

Давайте сначала подумаем о том, что logi c находится на месте. <Switch> делает именно то, что вы могли догадаться (аналогично обычному выражению switch), и возвращает первое совпадение <Route> внутри. Чтобы помочь визуализировать, давайте удалим JSX и просто используем логические операторы.

В настоящее время у вас есть эквивалент этого псевдокода:

switch(path) {
  case '/':
    switch(path) {
      case '/':
        return 'Form Component';
      case '/businesses/*':
        return 'Businesses Component';
    }
  case '/booking'
    return 'Booking Component';
  default:
    return null;
}

Вы видите проблему?

И внешний коммутатор, и вложенный коммутатор пытаются найти совпадение path. Поскольку вложенный коммутатор срабатывает только тогда, когда путь точно равен /, внутренний коммутатор также может только соответствовать этому. Как только вы измените путь на /businesses, внешний переключатель больше не будет совпадать с /, поэтому у вашего вложенного переключателя никогда не будет шанса найти соответствующий путь.

Есть несколько способов исправить это, и правильный путь будет зависеть от ваших конкретных c потребностей и предпочтений.

Во-первых, следуйте чему-то вроде того, что описал @faithfull. Поместите все свои <Route> на одном уровне. Это изменит ваши логики c на этот псевдокод:

switch(path) {
  case '/':
    return 'Form Component';
  case '/businesses/*':
    return 'Businesses Component';
  case '/booking'
    return 'Booking Component';
  default:
    return null;
}

Однако это не сработает, если вы хотите иметь вложенные маршруты. Если вам нужно, чтобы второй переключатель был вложенным, просто снимите опору exact с внешнего переключателя. Но это само по себе вызовет другие проблемы. <Switch> отображает только первое совпадение. Таким образом, удаление реквизита exact приведет к тому, что путь / всегда будет первым совпадением. Вам нужно переместить это в нижнюю часть вашего коммутатора, чтобы другие <Route> имели возможность сначала найти соответствие:

<Switch>
  <Route path="/booking">
    <Booking />
  </Route>
  <Route path="/"> 
    <Form />
  </Route>
</Switch>

Затем вы можете оставить вложенный маршрутизатор как есть, и вы должны будь добр к go!

Answer 2

Вы, вероятно, должны сделать что-то вроде:

<Switch>
  <Route exact path="/"> 
    <Form />
  </Route>
  <Route path="/booking">
    <Booking />
  </Route>
  <Route path ="/businesses/:businessesId"> 
    <Businesses />
  </Route>
</Switch>

А затем в вашем Form.tsx

import Selection from '...';
class Form extends React.Component {
  render() {
    return (
      {/*some other Form jsx*/}
      {Selection}
    );
  }
}