Компонент низшего порядка Маршруты не работают

Question

Я изучаю некоторые React и у меня есть вопрос по маршрутизации.

Я использую реагирующий маршрутизатор 4. В моем индексном файле у меня есть Маршрутизатор с 3 Маршрутами, определенными так:

<Router>
    <div>
        {indexRoutes.map((p, k) => {
            return <Route exact path={p.path} component={p.component} key={k} />;
        })}
    </div>
</Router>

Страницы: домашняя страница, логин и зона ограниченного доступа.Область участников еще не защищена аутентификацией (это не имеет значения для целей вопроса).

В области участников есть меню со ссылкой, которая изменяет основной контент в соответствии с тем, что было нажано.Выбор соответствующего компонента осуществляется в коммутаторе.Что происходит, так это то, что домашняя страница и страницы входа работают нормально, но страница участников просто загружает шаблон, и когда я нажимаю на ссылки, я просто получаю пустые страницы.

Я могу заставить страницы участников работать нормально, если яу вас нет маршрутизатора более высокого порядка (тот, у которого есть home, login, members) и просто есть ссылка на страницу участников из индекса.

Как мне сделать так, чтобы маршруты более низкого уровня работали как задумано?

Answer 1

Если вы используете Reaction-router-DOM, вы можете использовать Switch . Оберните все свои <Routes /> в компонент коммутатора, вместо этого используя Router. Как это:

import React from 'react';
import { Route, Switch } from 'react-router-dom';

<Switch>
  {indexRoutes.map((p, k) => {
      return <Route exact path={p.path} component={p.component} key={k} />;
  })}
</Switch>

А затем вставьте коммутатор в свое приложение, как вы это делаете с маршрутизатором.