Освоєння навігації в Remix: Посібник з хука useNavigation

У Remix, useNavigation — це хук, наданий фреймворком для відстеження стану навігації в межах вашого застосунку. Він особливо корисний для визначення, чи триває навігація, а також для отримання супутніх деталей, таких як тип навігації або цільовий маршрут.

Що робить useNavigation?

Хук useNavigation надає інформацію про поточний процес навігації. Він повертає об'єкт з деталями про поточний стан навігації. Основні властивості включають:

1. state:

Вказує на стан навігації, який може бути одним із наступних:

"idle": Навігація не відбувається.

"submitting": Відправляється форма.

"loading": Завантажується сторінка або ресурс.

2. location:

Об'єкт Location цільового маршруту, доступний під час навігації.

3. formData:

Об'єкт FormData, що був відправлений під час відправлення форми (доступний лише під час стану "submitting").

4. formMethod:

HTTP метод (наприклад, POST, PUT тощо), який використовувався під час відправлення форми (тільки під час "submitting").

5. formAction:

URL дії, що використовувався під час відправлення форми.

Приклад використання useNavigation

import { useNavigation } from "@remix-run/react";  

export default function ExampleComponent() {  
 const navigation = useNavigation();  

 return (  

    {navigation.state === "idle" && 
Навігація не відбувається.
}    {navigation.state === "submitting" && (    
Відправляємо форму до: {navigation.formAction}
    )}    {navigation.state === "loading" && (    
Завантаження нової сторінки: {navigation.location.pathname}
    )}    
    );   } ```  Ось приклад зі спінером:  ``` import { useNavigation } from "@remix-run/react";      export default function MyComponent() {    const navigation = useNavigation();       return (    
    {navigation.state !== "idle" && 
Завантаження...
}    
    {/* Основний контент тут */}    
Ласкаво просимо до мого застосунку!
    );   } ```  ## Підсумок  - `useNavigation` — потужний хук у Remix для відстеження стану навігації. - Він надає детальну інформацію про поточну навігацію, включаючи стан, цільове місце та інформацію про форму. - Ви можете використовувати його для покращення взаємодії з користувачем, показуючи індикатори завантаження, відлагоджуючи навігацію або надаючи зворотній зв'язок під час взаємодій.



Перекладено з: [Mastering Navigation in Remix: A Guide to useNavigation Hook](https://explore-code-with-me.medium.com/mastering-navigation-in-remix-a-guide-to-usenavigation-hook-71ff35aea240)