نگاهی به useNavigation: React hooks

در این سری از آموزش های React برای مبتدیان، ما به سادگی تابع useNavigation را بررسی می کنیم. ابتدا یادآوری می کنیم که این هوک هم در پروژه های React Native و هم در پروژه های React که از React Router استفاده می کنند موجود است.

زمینه: روتر React چیست؟

در مواردی که پروژه React تک صفحه ای شما به ناوبری یا مسیریابی صفحه نیاز دارد، از چیزی به نام مسیریابی سمت مشتری استفاده می کند. در واقع، در React، راه حل طراحی شده برای مسیریابی سمت مشتری، React Router نامیده می شود.

مقاله پیشنهادی: شروع برنامه نویسی

React Router به برنامه شما اجازه می دهد تا کل صفحات را در یک URL بدون درخواست یا بارگیری مجدد صفحه در سمت سرور پیمایش کند و باعث می شود رابط کاربری برنامه شما سریعتر و پویاتر ارائه شود.

قلاب useNavigation چه می کند؟

useNavigation قلابی است که در روتر React موجود است.

این قلاب، طبق مستندات رسمی React، تمام اطلاعاتی را که برای پیمایش یک صفحه نیاز دارید در اختیار شما قرار می دهد. اطلاعاتی مانند این:

• شاخص های بارگذاری جهانی
• هنگام ایجاد تغییرات، فرم ها را غیرفعال کنید.
• افزودن نشانگرهای مشغول به ارسال دکمه ها
• نمایش رکورد جدیدی که در سمت سرور ایجاد می شود.
• نمایش وضعیت رکورد جدید هنگام به روز رسانی آن

اما ما می خواهیم به طور خاص بر روی اجرای ساده قلاب useNavigation تمرکز کنیم.

import { useNavigation } from "react-router-dom";

function App() {
  const navigation = useNavigation();
}

نکته: توجه داشته باشید که useNavigation فقط باید با روترهای داده استفاده شود.

در کد بالا، متغیر ناوبری می تواند موارد زیر را برگرداند:

• navigation.state: این حالت می تواند غیرفعال، ارسال یا در حال بارگیری باشد.
• navigation.location: پیوند صفحه ای که کاربر می خواهد به آن برود.
• navigation.formData: داده های ارسال فرم
• navigation.formAction: آدرس اینترنتی که فرم به آن تحویل داده می شود.
• navigation.formMethod: شامل یکی از متدهای PATCH، PUT، POST یا DELETE است.

یک مثال ساده

حال می خواهیم یک مثال ساده از استفاده از use.Navigation را با هم ببینیم. در React App، ما یک Todo List را ارائه کردیم که در داخل آن فرمی برای وارد کردن اطلاعات برای درج یک کار جدید وجود دارد. چیزی مثل این:

سپس می توانید کد مؤلفه برنامه را مشاهده کنید:

export function App() {
  let navigation = useNavigation();
  let formRef = useRef(null);
  let [isAdding, setIsAdding] = useState(false);

  useEffect(() => {
    if (navigation.formData?.get('action') === 'add') {
      setIsAdding(true);
    } else if (navigation.state === 'idle') {
      setIsAdding(false);
      formRef.current?.reset();
    }
  }, [navigation]);

  return (
    <>
      <h2>Todos</h2>
      <p>
        Click on a todo item to navigate
        to the /todo/:id route.
      </p>
      <ul>
        {Object.entries(todos).map(([id, todo]) => (
          <li key={id}>
             <Link to={`/todo/${id}`}>{todo}</Link>
          </li>
        ))}
      </ul>
      <Form method="post" ref={formRef}>
      <input type="hidden" name="action" value="add" />
        <input name="todo"></input>
        <button type="submit" disabled={isAdding}>
          {isAdding ? 'Adding...' : 'Add'}
        </button>
      </Form>
    </>
  )
}

همانطور که در کد بالا مشاهده می کنید، هنگام ارسال فرم، از قلاب useNavigation برای غیرفعال کردن دکمه ارسال و نمایش کلمه افزودن دکمه استفاده می شود.

در همان زمان، هنگامی که یک آیتم جدید به لیست اضافه می شود، این صفحه به طور خودکار به مسیر پویا به نام todo/:id هدایت می شود. ما می توانیم از قلاب useParams برای مسیریابی پویا استفاده کنیم و برنامه را به مؤلفه Todo هدایت کنیم.

شکل زیر محتویات کامپوننت Todo را نشان می دهد. Todo/0 نشان دهنده اولین مورد در لیست، Todo/1 نشان دهنده مورد دوم و غیره است.

کد این کامپوننت به شرح زیر است:

export function Todo() {
  let params = useParams();
  return (
    <>
      <h2>You are now at todo/{params.id} route</h2>
      <p>id: {params.id}</p>
      <p>todo: {todos[params.id]}</p>
    </>
  )
}

اکنون روتر خود را در فایل main.jsx راه اندازی می کنیم. این فایل تمام مسیرهایی را که باید پیمایش کنیم را مشخص می کند.

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";


let router = createBrowserRouter( createRoutesFromElements(
  <>
  <Route path="/" action={todosAction} element={<App />} />
  <Route path="/todo/:id" element={<Todo />} />
  </>
  ) )

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
     <RouterProvider router={router} />
  </React.StrictMode>
);

در نهایت، todoAction ما مسئول افزودن یک آیتم جدید به لیست کارها و مسیریابی آن به مسیریابی پویا خواهد بود:

export async function todosAction({ request }) {
  let formData = await request.formData();
  let todo = formData.get('todo');
  if (typeof todo === 'string') {
    addTodo(todo);
  }

  await new Promise((r) => setTimeout(r, 500)); //just to show submitting state
  return new Response(null, {
    status: 302,
    headers: { Location: `/todo/${Object.keys(todos).length-1}`},
  });
}

نتیجه

اکنون می بینیم که هنگام ارسال فرم موارد زیر رخ می دهد:

اعزام ما برابر با navigate.state است

navigation.state حاوی کلیدهای عمل و وظایف است.

مقدار todo به لیست اضافه می شود و صفحه به todo/:id هدایت می شود.

در این مقاله به معرفی قلاب useNavigatıon پرداختیم و نحوه استفاده از آن را یاد گرفتیم. همچنین نحوه پیاده سازی قلاب useNavigation را دیدیم. امیدواریم این مقاله به شما در درک بهتر نحوه عملکرد قلاب useNavigation کمک کرده باشد.

از اینکه ما را تا پایان مقاله همراهی کردید سپاسگزاریم. لطفا اگر این مقاله برای شما مفید بود، آن را با دوستان خود به اشتراک بگذارید و نظرات دلگرم کننده خود را در قسمت نظرات با ما در میان بگذارید و اگر سوالی دارید با ما در میان بگذارید تا با همکاری یکدیگر پاسخ مناسب را پیدا کنیم.

نگاهی به useNavigation hooks: React اولین بار در Morning Knowledge and Technology ظاهر شد. به نظر می رسد.