Как в React правильно загржать часть страницы при неизменной другой части при смене url?

Question

[Shurik]

Здравствуйте. Есть url '/lk' и соответствующий ему компонент Lk. На этой странице я вывожу компонентом меню, которое должно располагаться на всех страницах "lk/*" (например /lk/1) и другие компоненты, соответствующие пунктам этого меню, которые надо подгружать динамически. Подскажите плиз как правильно это реализовать, разумеется используя react router.

На данный момент у меня сделано так, но я сомневаюсь в том, что это правильно:
Сделал компонент Lk, в котором рендерится компонент меню, а при создании самого компонента Lk с помощью useLocation смотрю url, беру его последнюю часть и в switch выбираю нужный мне компонент, который предполагается динамически загружать в зависимости от части url которая после /lk идет. Ну и сохраняю этот компонент в состояние и рендерю его как переменную рядом с компонентом меню.
В react-router Lk сопоставляется всем url /lk/*.

Буду благодарен рекомендациям.

Comments

[Kentavr16]

если я правильно понял, то вам нужно ознакомиться с концепцией дочерних роутов. далее пример из оф.документации:

<Routes>
  <Route path="/" element={<Dashboard />}>
    <Route
      path="messages"
      element={<DashboardMessages />}
    />
    <Route path="tasks" element={<DashboardTasks />} />
  </Route>
  <Route path="about" element={<AboutPage />} />
</Routes>

Whenever the location changes, looks through all its child routes to find the best match and renders that branch of the UI.

[Shurik]

Kentavr16, возможно. Нашел сейчас это в документации, только вот не понятно как в самом компоненте Lk работать с этими дочерними роутами. Если можно, то в двух словах пожалуйста.

[Shurik]

Kentavr16, нашел в доках. С помощью компонента , вдруг кому пригодится. Спасибо, что направили меня! Если хотите, напишите ответом, а не комментом к вопросу - отмечу решением.

Answer 1

[Kentavr16]

если я правильно понял, то вам нужно ознакомиться с концепцией дочерних роутов. далее пример из оф.документации:

<Routes>
  <Route path="/" element={<Dashboard />}>
    <Route
      path="messages"
      element={<DashboardMessages />}
    />
    <Route path="tasks" element={<DashboardTasks />} />
  </Route>
  <Route path="about" element={<AboutPage />} />
</Routes>

Whenever the location changes, looks through all its child routes to find the best match and renders that branch of the UI.

в помощь следующим ищущим вопросы стоит закрывать, даже если сами нашли ответ. Happy hacking.