Не подгружаются дочерние страницы в react router, как исправить?

Question

[HelWorld]

Дело в том, что мне нужно сделать так, чтобы при переходе на страницу, например - "classical", отображался месяц по умолчанию - Январь, дальше при переходе на другие месяца к адресу добавляются эти месяца. И проблема заключается в том, что при переходе на адресс по типу "/classical/january" вместо страницы сайта отображается просто пустая белая страничка, зато при переходе на просто "/classical" отображается месяц январь. Проверял несколько раз, написано у меня всё правильно и Outlet в файле "Classical" у меня тоже имеется. Подскажите решение данной проблемы

Вот код маршрутов:

<Routes>
  <Route path='/classical/*' element={<Classical />}>
    <Route index element={<January />} />
    <Route path='january' element={<January />} />
  </Route>
  <Route path='/page_2' element={<Page2 />} />
  <Route path='/page_3' element={<Page3 />} />
  <Route path='*' element={<Classical />} />
</Routes>

Answer 1

[Семён Федосеев]

Проверьте то, что у Вас React Router версии 6.
При Outlet в атрибуте path не нужно указывать знак звёздочки "*".

<Routes>
  <Route path='/' element={<MainPage />} />
  <Route path='/classical' element={<Classical />}>
    <Route index element={<January />} />
    <Route path='january' element={<January />} />
  </Route>
  <Route path='/page_2' element={<Page2 />} />
  <Route path='/page_3' element={<Page3 />} />
  <Route path='*' element={<Error404Page />} />
</Routes>

import { Outlet } from 'react-router-dom';

export const ClassicalPage = () => {
  return (
    <div>
      <Outlet />
    </div>
  );
};

export const JanuaryPage = () => {
  return (
    <div>
      Содержимое страницы
    </div>
  );
};