در این سری از مقالات آموزشی React برای مبتدیان، نگاهی ساده به نحوه عملکرد UseNavigation خواهیم داشت. ابتدا یادآوری می کنیم که این هوک هم در پروژه های React Native و هم در پروژه های React که از React Router استفاده می کنند قابل دسترسی است.

اطلاعات اولیه: React Router چیست؟

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

مطلب پیشنهادی: آموزش شروع برنامه نویسی

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

هوک ناوبری چه می کند؟

useNavigation قلابی است که در React Router قابل دسترسی است.

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

• نشانگر بارگیری جهانی
• فرم ها در حین تغییرات غیرفعال می شوند.
• اضافه کردن نشانگر مشغول به ارسال دکمه
• نمایش رکورد جدید در حال ایجاد در سمت سرور.
• نمایش وضعیت جدید یک رکورد هنگام به روز رسانی

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

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

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

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

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

• 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 هدایت می شود.

در این مقاله با استفاده از قلاب ناوبری آشنا شدیم و کاربردهای آن را یاد گرفتیم. همچنین نحوه اجرای قلاب ناوبری استفاده را دیدیم. امیدواریم این مقاله به شما در درک نحوه کار قلاب های ناوبری کمک کرده باشد.

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