Можно ли создавать вложенные маршруты с несколькими уровнями с помощью react router dom

#reactjs #react-router-dom

Вопрос:

У меня есть приложение react, которое имеет несколько уровней (целевые страницы, страницы приложений и мобильные страницы), мои маршруты приложений выглядят так в корневом компоненте:

 <Switch>
  <Route exact path = '/' component={LandingPages} />
  <Route path = '/app' component={AppPages} />
  <Route path = '/mobile' component={MobilePages} />
</Switch>

Маршрут » / » ведет к компоненту LandingPages, в котором есть такие маршруты:

         <Switch>
            <Route exact  path='/' component={HomePage} />
            <Route path = '//privacypolicy' component={PrivacyPolicy} />
            <Route path = '/termsandconditions' component={TermsnConditions} />
        </Switch>

Маршрут ‘/app имеет:

        <Switch>
            <Route exact path='/app' component = {Dashboard} />
            <Route path='/app/signin' component={SignIn} />
            <Route path='/app/resetpassword' component={ResetPassword} />
            <Route path='/app/register' component={Register} />
        </Switch>

«Мобильный» маршрут имеет:

     <Switch>
        <Route path='/mobile' component = {MobHome} />
        <Route exact path='/mobile/one' component = {One} />
    </Switch>

Домашние маршруты отображаются пустыми, когда я делаю » / » точным в корневом компоненте, но работают, когда я делаю это в компоненте посадки. Но тогда другие маршруты не показывают, является ли » / » неточным в маршруте.

Как я могу настроить их на работу одновременно?

Я новичок в реагировании, так что извините меня, если вопрос кажется глупым,

1. Вложенные маршруты будут отображаться, если родительский маршрут не помечен как exact , но тогда (как вы упомянули) маршруты ниже / не будут отображаться из-за Switch компонента ( Switch будет отображаться только первый соответствующий маршрут). Вы можете попробовать изменить порядок Route компонентов в корневом компоненте.

Ответ №1:

При фактическом вложении ваших маршрутов никакие Route компоненты с вложенными подмаршрутами не могут указать exact опору, потому что вложенные маршруты не смогут точно совпадать и отображаться.

Взгляните на react-router-dom пример вложенности.

Еще один аспект, на который следует обратить внимание в рамках Switch компонентов, имеет значение порядок следования и специфичность. Будет предпринята Switch попытка вернуть и отобразить первое найденное совпадение, вы захотите упорядочить маршруты, чтобы перечислить ваши более конкретные пути перед менее конкретными путями. Другими словами, "/segment1/segment2" раньше "/segment1" , чем раньше "/" .

Корневой уровень

 <Switch>
  <Route path='/app' component={AppPages} />
  <Route path='/mobile' component={MobilePages} />
  <Route path='/' component={LandingPages} />
</Switch>

Используйте useRouteMatch крючок для доступа к току path .

путь — (строка) Шаблон пути, используемый для сопоставления. Полезно для построения вложенных <Route> s

Целевые страницы

 const { path } = useRouteMatch();

...

<Switch>
  <Route path={`${path}/privacypolicy`} component={PrivacyPolicy} />
  <Route path={`${path}/termsandconditions`} component={TermsnConditions} />
  <Route path={path} component={HomePage} />
</Switch>

Страницы приложений

 const { path } = useRouteMatch();

...

<Switch>
  <Route path={`${path}/signin`} component={SignIn} />
  <Route path={`${path}/resetpassword`} component={ResetPassword} />
  <Route path={`${path}/register`} component={Register} />
  <Route path={path} component={Dashboard} />
</Switch>

Мобильные страницы

 const { path } = useRouteMatch();

...

<Switch>
  <Route path={`${path}/one`} component={One} />
  <Route path={path} component={MobHome} />
</Switch>