Какова обычная практика вложения маршрутов в отдельные компоненты в React Router 6?
Общим шаблоном в подавляющем большинстве систем маршрутизации является возможность рефакторинга групп маршрутов для уменьшения сложности и размера файлов (а иногда также для облегчения применения изменений к группе маршрутов). В противном случае вы можете получить очень длинный файл с множеством зависимостей.
Когда я смотрю в документации по реагирующему маршрутизатору, чтобы узнать, что они говорят по этому поводу, я вижу:
(TODO: нужно поговорить о вложении, возможно, даже в отдельном документе)
Допустим, у меня есть компонент DefaultRoutes, который использует компонент <Routes>, и несколько дочерних элементов <Route> с набором маршрутов пациентов:
return (
<Routes>
{/*..other routes*/}
<Route path = "/patients" element = {
<RequireAuth>
<DefaultLayout />
</RequireAuth>
}>
<Route index element = {<Patients />} />
<Route path = ":patientId">
<Route index element = {<PatientDetails />} />
<Route path = "edit" element = {<EditPatient />} />
</Route>
<Route path = "new">
<Route index element = {<NewPatient />} />
<Route path = ":clinicId" element = {<NewPatient />} />
</Route>
</Route>
{/*..other routes*/}
</Routes>
);
Как бы мне реорганизовать мои маршруты пациентов в отдельный компонент (PatientRoutes) или что-то в этом роде, чтобы они хотя бы не находились в одном файле?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Здесь есть официальная страница документации, на которой обсуждается, как управлять вложенной маршрутизацией:
https://reactrouter.com/en/main/start/overview#nested-routes
Вас также может заинтересовать (в зависимости от того, что вы делаете) компонент Outlet, который позволяет отображать решение о маршрутизации дочернего маршрута в определенном месте.
Если вы хотите «разделить код» и определить текущие вложенные маршруты в отдельные компоненты, которые затем будут отображаться как дочерние маршруты, это изменение будет простым.
Извлеките группу вложенных маршрутов, которую вы хотите отобразить отдельно, в отдельный компонент. Дочерние маршруты необходимо будет визуализировать в другой компонент
Routes, а пути будут строиться относительно родительского маршрута аналогично вложенным маршрутам.const PatientRoutes = () => ( <Routes> <Route element = { <RequireAuth> <DefaultLayout /> </RequireAuth> }> <Route path = "/" element = {<Patients />} /> <Route path = ":patientId"> <Route index element = {<PatientDetails />} /> <Route path = "edit" element = {<EditPatient />} /> </Route> <Route path = "new"> <Route index element = {<NewPatient />} /> <Route path = ":clinicId" element = {<NewPatient />} /> </Route> </Route> </Routes> );Обновите родительский маршрут, чтобы отобразить новый компонент дочерних маршрутов с помощью пути, который позволяет сопоставлять пути дочерних маршрутов, добавляя к пути подстановочный знак
"*"или Splat, средство сопоставления.return ( <Routes> {/* ..other routes */} <Route path = "/patients/*" element = {<PatientRoutes />} /> {/* ..other routes */} </Routes> );