كيف يمكن تنزيل وتشغيل React Router

أولا يجب تنزيل المكتبة من خلال الأمر :

npm install react-router-dom

بعد ذلك يجب تهيئة التوجيه داخل مشروعك ففي لملف src/App.js يجب إضافة التالي :

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

الآن قمنا بإنشاء عنوانين أحدهما لصفحة ال home و الأخرى لصفحة ال about .

وهكذا يمكنك وضع أى مسار أو عنوان هنا في الملف App ومن ثم توفير المكون الذي سيعمل عند الذهاب لهذا العنوان .

ويمكنك قراءة التالي لمزيد من التفاصيل :

لعمل صفحات أخرى وتحويل التطبيق إلى SPA سنقوم باستخدام مكتبة react-router وهي المسؤولة عن إدارة التوجيه بداخل التطبيق.

• تثبيت المكتبة عن طريق الأمر 

  npm i react-router

• وفي المكون App لديك نقوم باستخدام المكتبة كالتالي 

  import { BrowserRouter, Routes, Route,Link } from "react-router";
  import Home from "./pages/Home";
  import About from "./pages/About";
  import Contact from "./pages/Contact";
  
  function App() {
    return (
      <BrowserRouter>
       <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
          <Link to="/contact">Contact</Link>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </BrowserRouter>
    );
  }

  سيتطلب الأمر منك بالطبع إنشاء المكونات التي هي عبارة عن صفحة وهي Home ،ِ About , Contact.

•  صفحة Home.jsx

export default function Home() {
     return <h1>Home Page</h1>;
}

•  صفحة About.jsx

export default function About() {
  return <h1>About Page</h1>;
}

• صفحة Contact.jsx

export default function Contact() {
  return <h1>Contact Page</h1>;
}

سيظهر لديك  في الصفحة navbar وبه الروابط للصفحات واستخدام المكون Link هذا بديل محسن من anchor tag (<a>) مع استخدام to بدلا من href للإنتقال للصفحة بدون عمل إعادة تحميل للصفحة فقط الإنتقال للصفحة.

لابد أن يكون المسار الذي تريد الذهاب له "to="/about   يجب أن يكون مطابق حرفيا لـ  "path="/about في <Route> حتى يتم تحميل الصفحة about بنجاح.

يمكن قراءة المزيد حول react-router

هل يمكن أن انشئ ملف خاص ب router 

مثل يلي موجود في Vue ام لا يمكن ذلك في رياكت

بتاريخ 2 دقائق مضت قال Hxfhf Ucicic:

هل يمكن أن انشئ ملف خاص ب router 

مثل يلي موجود في Vue ام لا يمكن ذلك في رياكت

نعم بالطبع يمكنك ذلك فيمكنك إنشاء ملف منفصل وإستدعاء كمكون في ملف App .

والملف يكون عبارة عن شئ كالتالي :

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from "./pages";
import About from "./pages/about";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

export default function Router() {
  return <RouterProvider router={router} />;
}

ويمكنك إستدعاءه هكذا في App :

import Router from "./router";

function App() {
  return <Router />;
}

export default App;

بتاريخ 6 دقائق مضت قال Hxfhf Ucicic:

هل يمكن أن انشئ ملف خاص ب router 

مثل يلي موجود في Vue ام لا يمكن ذلك في رياكت

يمكنك عمل مكون خاص AppRouter بهذه العملية ليكون مستقل بذاته لهذا الأمر كالتالي 

import { BrowserRouter, Routes, Route } from "react-router";

import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

export default function AppRouter() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

ثم استخدامه بداخل App.js كالتالي

import { Link } from "react-router";
import AppRouter from "./router";

export default function App() {
  return (
    <>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
      <AppRouter />
    </>
  );
}

أو يوجد طريقة أخرى متاحة يمكنك استخدامه أيضا ليكون المكون AppRouter كالتالي

mport { createBrowserRouter, RouterProvider } from "react-router";
import Home from "./pages";
import About from "./pages/about";
import Contact from "./pages/Contact";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/contact",
    element: <Contact />,
  },
]);

export default function AppRouter() {
  return <RouterProvider router={router} />;
}

واستخدام المكون AppRouter بداخل App.js كالتالي 

import { Link } from "react-router";
import AppRouter from "./router";

export default function App() {
  return (
    <>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
      <AppRouter />
    </>
  );
}

الطريقتان متاحتان يمكنك اختيار أي منهم.

شكرا لكم أصبح الأمر أسهل 🌹