ما هي فكرة React Router وكيف يمكن استعماله؟

React Router او موجه رياكت هو في الاصل مكتبة تستعمل في التوجيه Routing من جانبي العميل والخادم. يمكن استعمالها على تطبيقات React سواء في الهاتف عن طريق ReactNative او الخادم بوساطة NodeJS او على الويب باستخدام React. بمعنى انها مثل الملحقة التي تقوم بخدمة هذا الغرض. فمثلما يمكن استعمال React لبناء عدد من المكونات التي تستعملها في صفحة الويب خاصتك يمكنك الاعتماد عليها بالكامل في انشاء تطبيقات ويب متعددة الصفحات يمكن استعمال ملحقة التوجيه بينها للتحصل على تصفح لطيف بينها يلخص عمل تطبيقات الصفحة الواحدة.

يمكن تثبيته عن طريق تثبيت ملحقاته باستخدام مدير الحزم npm :

npm install react-router-dom

في المكون الجذر للتطبيق، قم باستيراد وحدة BrowserRouter وضع داخلها مكون التطبيق:

import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

ثم بأي مكون ما يمكنك استعمال اي رابط للتنقل الى صفحة اخرى كـ:

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

export default function App() {
  return (
    <div>
      <h1>اسم التطبيق</h1>
      <nav>
        <Link to="/contact-us">اتصل بنا</Link>
      </nav>
    </div>
  );
}

يقتضي هذا ان يكون هنالك مكون باسم contact-us على ذات مستوى App.js

بتاريخ 17 ساعات قال Adnane Kadri:

React Router او موجه رياكت هو في الاصل مكتبة تستعمل في التوجيه Routing من جانبي العميل والخادم. يمكن استعمالها على تطبيقات React سواء في الهاتف عن طريق ReactNative او الخادم بوساطة NodeJS او على الويب باستخدام React. بمعنى انها مثل الملحقة التي تقوم بخدمة هذا الغرض. فمثلما يمكن استعمال React لبناء عدد من المكونات التي تستعملها في صفحة الويب خاصتك يمكنك الاعتماد عليها بالكامل في انشاء تطبيقات ويب متعددة الصفحات يمكن استعمال ملحقة التوجيه بينها للتحصل على تصفح لطيف بينها يلخص عمل تطبيقات الصفحة الواحدة.

يمكن تثبيته عن طريق تثبيت ملحقاته باستخدام مدير الحزم npm :

npm install react-router-dom

في المكون الجذر للتطبيق، قم باستيراد وحدة BrowserRouter وضع داخلها مكون التطبيق:

import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

ثم بأي مكون ما يمكنك استعمال اي رابط للتنقل الى صفحة اخرى كـ:

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

export default function App() {
  return (
    <div>
      <h1>اسم التطبيق</h1>
      <nav>
        <Link to="/contact-us">اتصل بنا</Link>
      </nav>
    </div>
  );
}

يقتضي هذا ان يكون هنالك مكون باسم contact-us على ذات مستوى App.js

كتبت مثل ما قلت ولكن لم يعمل ؟

بما أنك مسجل في الدوره أخي محمد
فيمكنك القاء نظره عن هذا الدرس

قد تجد مايفيدك

بتاريخ On 8/26/2022 at 08:48 قال Mohamed Montaser3:

كتبت مثل ما قلت ولكن لم يعمل ؟

ما قمت به حتى الآن صحيح، و لكن ينقصك فقط تعريف ال route حتى تتمكن react من معرفة إلى أين يجب أن تنتقل عند الضغط على contact us

لاحظ المثال التالي (ملف App.js):

import React from "react";
import {
  Switch,
  Route,
  Link
} from "react-router-dom";

import About from "./components/About";

export default function App() {
  return (
    <>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/about">
            <About />
          </Route>
        </Switch>
      </div>
    </>
  );
}

لاحظ أننا في الخاصية to في link نقوم بكتابة ال route الذي قمنا بتعريفه داخل switch مثل about/ أو home/ أو أيًا كان و ليس مسار الملف الخاص بالمكون