Поведение загрузчика маршрутизатора React
В настоящее время я погружаюсь в React-Router и настроил структуру маршрутизации следующим образом:
const router = createBrowserRouter([
{
path: "/",
loader: rootLayoutLoader,
element: <RootLayout />,
children: [
{
path: "student",
loader: commonPageLoader,
element: <Student />,
},
{
path: "teacher",
loader: commonPageLoader,
element: <Teacher />,
},
],
},
]);
В моей настройке функция rootLayoutLoader отвечает за вызов API для сбора некоторой общей информации, используемой компонентами Teacher и Student. Тем временем функция commonPageLoader вызывает API на основе пути к местоположению для получения определенных данных.
Теперь вот проблема, с которой я столкнулся: когда я нахожусь на маршруте "/teacher" и нажимаю ссылку "Teacher", она запускает функции rootLayoutLoader и commonPageLoader. Как я могу предотвратить такое поведение двойной загрузки, гарантируя при этом правильную выборку необходимых данных?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Именно так обычно работают загрузчики маршрутов: они будут повторно проверять свои данные в определенных экземплярах, чтобы синхронизировать данные с маршрутами.
В нескольких случаях данные проверяются повторно, что обеспечивает автоматическую синхронизацию пользовательского интерфейса с данными:
- После вызова действия из
<Form>.- После вызова действия из
<fetcher.Form>- После вызова действия из
useSubmit- После вызова действия из
fetcher.submit- Когда явная повторная проверка запускается через
useRevalidator- Когда параметры URL-адреса изменяются для уже визуализированного маршрута
- Когда параметры URL-поиска меняются
- При переходе к тому же URL-адресу, что и текущий URL-адрес.
Вы активируете последнюю точку, когда нажимаете ссылку "/teacher", когда уже находитесь на пути "/teacher".
Вы можете реализовать свойство mustRevalidate на маршруте, чтобы он не проходил повторную проверку, если путь URL-адреса тот же.
Основной пример:
const shouldRevalidate = ({ currentUrl, nextUrl }) => {
return currentUrl.pathname !== nextUrl.pathname;
};
const router = createBrowserRouter([
{
path: "/",
loader: rootLayoutLoader,
element: <RootLayout />,
children: [
{
path: "student",
loader: commonPageLoader,
shouldRevalidate,
element: <Student />,
},
{
path: "teacher",
loader: commonPageLoader,
shouldRevalidate,
element: <Teacher />,
},
],
},
]);
@Thamotharan Какая страница? А также я считаю, что все загрузчики маршрутов вызываются при вводе маршрута.
Можно ли предотвратить вызов функции rootLayoutLoader при переходе по тому же URL-адресу, что и текущий URL-адрес.
@Thamotharan Вы также можете передать обратный вызов функции shouldRevalidate по корневому маршруту "/", если хотите.
Спасибо, но я хотел бы вызвать функцию
rootLayoutLoaderпри первой загрузке страницы.