رد فعل راوتر
لا يتضمن إنشاء تطبيق React توجيه الصفحة.
React Router هو الحل الأكثر شيوعًا.
أضف جهاز التوجيه React
لإضافة React Router في تطبيقك ، قم بتشغيل هذا في Terminal من الدليل الجذر للتطبيق:
npm i -D react-router-dom
ملاحظة: يستخدم هذا البرنامج التعليمي React Router v6.
إذا كنت تقوم بالترقية من الإصدار 5 ، فستحتاج إلى استخدام علامة @ أحدث:
npm i -D react-router-dom@latest
هيكل المجلد
لإنشاء تطبيق بمسارات صفحات متعددة ، فلنبدأ أولاً ببنية الملف.
داخل src
المجلد ، سننشئ مجلدًا باسم
pages
عدة ملفات:
src\pages\
:
Layout.js
Home.js
Blogs.js
Contact.js
NoPage.js
سيحتوي كل ملف على مكون React أساسي جدًا.
الاستخدام الأساسي
الآن سوف نستخدم جهاز التوجيه الخاص بنا في ملفنا index.js
.
مثال
استخدم React Router للتوجيه إلى الصفحات بناءً على URL:
index.js
:
import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
شرح المثال
نختتم المحتوى الخاص بنا أولاً بـ <BrowserRouter>
.
ثم نحدد <Routes>
. يمكن أن يحتوي التطبيق على عدة ملفات <Routes>
. مثالنا الأساسي يستخدم واحدًا فقط.
<Route>
يمكن أن تكون متداخلة. الأول <Route>
له مسار للمكون /
ويجعله .Layout
ترث المتداخلة <Route>
وتضيف إلى المسار الأصلي. لذلك blogs
يتم دمج المسار مع الأصل ويصبح
/blogs
.
لا يحتوي Home
مسار المكون على مسار ولكنه يحتوي على
index
سمة. يحدد ذلك هذا المسار على أنه المسار الافتراضي للمسار الأصلي ، وهو /
.
سيعمل تعيين path
إلى *
بمثابة رابط شامل لأي عناوين URL غير محددة. هذا شيء عظيم بالنسبة لصفحة خطأ 404.
الحصول على شهادة!
95 دولارًا ENROLL
الصفحات / المكونات
المكون Layout
له
<Outlet>
وعناصر <Link>
.
يعرض <Outlet>
المسار الحالي المحدد.
<Link>
يستخدم لتعيين عنوان URL وتتبع محفوظات الاستعراض.
في أي وقت نقوم بالربط بمسار داخلي ، سنستخدمه <Link>
بدلاً من <a href="">
.
يعد "مسار التخطيط" مكونًا مشتركًا يُدرج المحتوى المشترك في جميع الصفحات ، مثل قائمة التنقل.
Layout.js
:
import { Outlet, Link } from "react-router-dom";
const Layout = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Outlet />
</>
)
};
export default Layout;
Home.js
:
const Home = () => {
return <h1>Home</h1>;
};
export default Home;
Blogs.js
:
const Blogs = () => {
return <h1>Blog Articles</h1>;
};
export default Blogs;
Contact.js
:
const Contact = () => {
return <h1>Contact Me</h1>;
};
export default Contact;
NoPage.js
:
const NoPage = () => {
return <h1>404</h1>;
};
export default NoPage;