React Router несколько маршрутов

Question

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

const HomeContent = () => {
  return (
    <div style={{ background: 'red', width: '100%', height: '400px' }}>
      Home
    </div>
  );
};

const AboutContent = () => {
  return (
    <div style={{ background: 'blue', width: '100%', height: '400px' }}>
      About
    </div>
  );
};

const DashBoardNav = () => {
  return (
    <div style={{ background: 'red', width: '100%', height: '400px' }}>
      DashBoardNav
      <ul>
        <li>Home</li>
        <li>About</li>
      </ul>
    </div>
  );
};
const MainRoutes = () => {
  const dispatch = useDispatch();
  const { popUpIsOpen } = useSelector(RootState => RootState.togglePopUp);
  const { sideIsOpen } = useSelector(RootState => RootState.toggleSide);
  return (
    <GlobalContainer>
      <GlobalStyle />
      <Overlay
        onClick={() =>
          popUpIsOpen ? dispatch(toggle()) : dispatch(toggleSide())
        }
        pop={popUpIsOpen ? popUpIsOpen : sideIsOpen}
      />
      <Routes>
        <Route path="/" element={<Header />} />
        <Route path="dashboard" element={<DashBoardNav />} />
      </Routes>
      <Content>
        <Routes>
          <Route exact path="/" element={<HomeContent />}>
            <Route path="about" element={<AboutContent />} />
          </Route>
          <Route path="dashboard" element={<> DashBoard </>}>
            <Route path="about" element={<> about </>} />
          </Route>
        </Routes>
      </Content>

      <Footer />
    </GlobalContainer>
  );
};

export default MainRoutes;

Но я получаю следующую ошибку, моя навигационная панель отображается нормально в моем "/", и мой домашний компонент выглядит так:

И когда я пытаюсь введите мой путь "/ about", моя панель навигации не появится, и мой div О (компонент: AboutContent) также не будет:

В основном мне нужно несколько маршрутов

, где у меня есть две навигационные панели (одна с начальной страницы и другие, другая с приборной панели)

наравне с содержанием

Answer 1

Начиная с реакции маршрутизатора v4, вы не вкладываете маршруты, а храните их внутри компонента. здесь является базовым c примером для той же цели, которую вы пытаетесь достичь.

Answer 2

<Switch>
  <Route exact path="/" element={<HomeContent />} />
  <Route path="/about" element={<AboutContent />} />
  <Route path="/dashboard" element={<DashBoardNav />} />
</Switch>

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

Для получения более подробной информации, просим вас ссылаться на мою ссылку на гист * .

Answer 3

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

Мне легче читать код при переносе Route s в Switch, поэтому очевидно, что будет визуализирован только один из Route компонентов.

Вот полный пример (удален другой код, не относящийся к проблеме):

const MainRoutes = () => {
  return (
    <GlobalContainer>
      <Switch>
        <Route exact path="/">
          <Header/>
        </Route>

        <Route path="/dashboard">
          <DashBoardNav/>
        </Route>
      </Switch>

      <Content>
        <Switch>
          <Route exact path="/">
            <HomeContent/>
          </Route>

          <Route path="/about">
            <AboutContent/>
          </Route>
        </Switch>
      </Content>

      <Footer />
    </GlobalContainer>
  );
};