Reactالتوجيه

npm i react-router-dom@latest

npm i react-router-dom@6.26.2

// react-router-dom هنا قمنا بتضمين ما نحتاجه من المكتبة
import { BrowserRouter, Route, Routes } from "react-router-dom";

// هنا قمنا بتضمين المكونات و الصفحات التي سنعرضها في واجهة المستخدم
import Layout from "./layouts/Layout";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";
import ProfilePage from "./pages/ProfilePage";
import NotFoundPage from "./pages/NotFoundPage";
import UsersPage from "./pages/UsersPage";

// مع جعله يمكن الوصول له من خارج هذا الملف <App> هنا قمنا بتعريف المكوّن
export default function App() {
    return (
        <div className="app">
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Layout />}>
                        <Route index element={<HomePage />} />
                        <Route path="/about" element={<AboutPage />} />
                        <Route path="/users" element={<UsersPage />} />
                        <Route path="/users/:username" element={<ProfilePage />} />
                        <Route path="*" element={<NotFoundPage />} />
                    </Route>
                </Routes>
            </BrowserRouter>
        </div>
    );
}

// <Navbar /> بالإضافة إلى المكوّن react-router-dom هنا قمنا بتضمين ما نحتاجه من المكتبة
import { Outlet } from "react-router-dom";
import Navbar from "../components/Navbar";

// الذي سيمثل الشكل العام لجميع الصفحات التي سيتم عرضها <Layout> هنا قما بتعريف المكوّن
export default function Layout() {
    return (
        <div>
            <Navbar /> {/* هنا سيتم عرض قائمة الروابط الموجودة في هذا المكوّن */}
            <Outlet /> {/* هنا سيتم عرض محتوى الصفحة التي يتم إدخال رابطها */}
        </div>
    )
}

// react-router-dom هنا قمنا بتضمين ما نحتاجه من المكتبة
import { NavLink } from 'react-router-dom';

// و الذي وضعنا فيه قائمة الروابط <Navbar> هنا قما بتعريف المكوّن
function Navbar() {
    return (
        <nav>
            <NavLink to="/">Home</NavLink>
            <NavLink to="/about">About</NavLink>
            <NavLink to="/users">Users</NavLink>
            <NavLink to="/error">Unkown</NavLink>
        </nav>
    )
}

export default Navbar;

// و الذي وضعنا فيه محتوى الصفحة الرئيسية <HomePage> هنا قما بتعريف المكوّن
export default function HomePage() {
    return (
        <div className="page home">
            <h1>Home Page</h1>
            <p>Page content can be added here..</p>
        </div>
    )
}

// و الذي وضعنا فيه محتوى صفحة عادية <AboutPage> هنا قما بتعريف المكوّن
export default function AboutPage() {
    return (
        <div className="page home">
            <h1>About Page</h1>
            <p>Page content can be added here..</p>
        </div>
    )
}

// react-router-dom هنا قمنا بتضمين ما نحتاجه من المكتبة
import { Link } from "react-router-dom";

// هنا قمنا بتعريف مصفوفة وضعنا فيها 3 كائنات، كل كائن منهم يمثل معلومات مستخدم واحد
const users = [
    { id: 1, name: "Mhamad" },
    { id: 2, name: "Sara" },
    { id: 3, name: "Ziad" }
];

// و الذي وضعنا فيه محتوى صفحة المستخدمين <UsersPage> هنا قما بتعريف المكوّن
export default function UsersPage() {
    return (
        <div className="page users">
            <h1>Users Page</h1>
            <p>{users.length} users have been found.</p>
            <ul>
                {users.map(user => (
                    <li key={user.id} >
                        <Link to={`/users/${user.name}`}>{user.name}</Link>
                    </li>
                ))}
            </ul>
        </div>
    )
}

// react-router-dom هنا قمنا بتضمين ما نحتاجه من المكتبة
import { useParams, Link } from "react-router-dom";

// و الذي حددنا فيه كيف سيتم عرض صفحة المستخدم <ProfilePage> هنا قما بتعريف المكوّن
export default function ProfilePage() {

    // لتخزين جميع المعلومات الدينامكية التي تم تمريرها في الرابط useParams() هنا قمنا باستخدام الدالة
    // params.username فعلياً الرابط يحتوي على إسم المستخدم فقط و الذي أصبح بالإمكان الوصول إليه هكذا
    const params = useParams();

    return (
        <div className="page profile">
            <h1>{params.username}'s Profile</h1>
            <p>You are viewing {params.username}'s profile.</p>
            <div>
                <Link to="/users" className="btn">Back to users</Link>
            </div>
        </div>
    )
}

// react-router-dom هنا قمنا بتضمين ما نحتاجه من المكتبة
import { Link } from "react-router-dom";

// و الذي حددنا فيه ما سيتم عرضه للمستخدم عند الدخول لرابط غير موجود <NotFoundPage> هنا قما بتعريف المكوّن
export default function NotFoundPage() {
    return (
        <div className="page">
            <h1>Error 404 - Page Not Found!</h1>
            <p>The page you are looking for has been removed or its URL has been changed.</p>
            <div>
                <Link to="/" className="btn">Go to Home Page</Link>
            </div>
        </div>
    )
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f5f5f5;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

h1 {
    font-size: 1.6em;
    font-weight: normal;
    margin-bottom: 1em;
}

p {
    color: gray;
    margin: .6em 0;
    line-height: 2.2em;
}

a {
    text-decoration: none;
}

.app {
    display: flex;
    flex-direction: column;
    margin: 1em;
}

nav {
    flex: 0;
    background-color: #4a5ec9;
    border-radius: 20px;
    margin-bottom: 1.5em;
}

nav a {
    display: inline-block;
    color: #a2aff9;
    margin: 0.5em 0.25em;
    padding: 0.5em 1em;
    font-size: 18px;
    border-radius: 20px;
    transition: all .3s;
}

nav a.active,
nav a:hover {
    color: white;
    background-color: #657cff;
}

.page {
    border-radius: 20px;
    padding: 2em 1em;
    background-color: white;
}

.users ul {
    margin-top: 2em;
    list-style-type: none;
}

.users ul li {
    margin-bottom: 1em;
}

.users ul li a {
    padding: 10px 15px;
    display: block;
    box-shadow: 1px 1px 4px #ddd;
    border-radius: 10px;
    color: crimson;
}

.btn {
    height: 2.6em;
    line-height: 2.6em;
    padding: 0 1.4em;
    color: whitesmoke;
    background-color: #4a5ec9;
    display: inline-block;
    border-radius: 6px;
    margin-top: 1.2em;
}

// react-router-dom هنا قمنا بتضمين ما نحتاجه من المكتبة
import { createBrowserRouter, RouterProvider } from "react-router-dom";

// هنا قمنا بتضمين المكونات و الصفحات التي سنعرضها في واجهة المستخدم
import Layout from "./layouts/Layout";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";
import UsersPage from "./pages/UsersPage";
import ProfilePage from "./pages/ProfilePage";
import NotFoundPage from "./pages/NotFoundPage";

// لإنشاء كائن يمثل شبكة الروابط createBrowserRouter() هنا قمنا باستخدام الدالة
const router = createBrowserRouter([
    {
        path: '/',
        element: <Layout />,
        children: [
            {
                path: '',
                element: <HomePage />
            },
            {
                path: '/about',
                element: <AboutPage />
            },
            {
                path: '/users',
                element: <UsersPage />
            },
            {
                path: '/users/:username',
                element: <ProfilePage />
            },
            {
                path: '*',
                element: <NotFoundPage />
            }
        ]
    }
]);

// مع جعله يمكن الوصول له من خارج هذا الملف <App> هنا قمنا بتعريف المكوّن
// الذي يحتوي على شبكة الروابط قمن بتم router الكائن
export default function App() {
    return (
        <div className="app">
            <RouterProvider router={router} />
        </div>
    );
}

// <Navbar /> بالإضافة إلى المكوّن react-router-dom هنا قمنا بتضمين ما نحتاجه من المكتبة
import { Outlet } from "react-router-dom";
import Navbar from "../components/Navbar";

// الذي سيمثل الشكل العام لجميع الصفحات التي سيتم عرضها <Layout> هنا قما بتعريف المكوّن
export default function Layout() {
    return (
        <div>
            <Navbar /> {/* هنا سيتم عرض قائمة الروابط الموجودة في هذا المكوّن */}
            <Outlet /> {/* هنا سيتم عرض محتوى الصفحة التي يتم إدخال رابطها */}
        </div>
    )
}

// react-router-dom هنا قمنا بتضمين ما نحتاجه من المكتبة
import { NavLink } from 'react-router-dom';

// و الذي وضعنا فيه قائمة الروابط <Navbar> هنا قما بتعريف المكوّن
function Navbar() {
    return (
        <nav>
            <NavLink to="/">Home</NavLink>
            <NavLink to="/about">About</NavLink>
            <NavLink to="/users">Users</NavLink>
            <NavLink to="/error">Unkown</NavLink>
        </nav>
    )
}

export default Navbar;

// و الذي وضعنا فيه محتوى الصفحة الرئيسية <HomePage> هنا قما بتعريف المكوّن
export default function HomePage() {
    return (
        <div className="page home">
            <h1>Home Page</h1>
            <p>Page content can be added here..</p>
        </div>
    )
}

// و الذي وضعنا فيه محتوى صفحة عادية <AboutPage> هنا قما بتعريف المكوّن
export default function AboutPage() {
    return (
        <div className="page home">
            <h1>About Page</h1>
            <p>Page content can be added here..</p>
        </div>
    )
}

// react-router-dom هنا قمنا بتضمين ما نحتاجه من المكتبة
import { Link } from "react-router-dom";

// هنا قمنا بتعريف مصفوفة وضعنا فيها 3 كائنات، كل كائن منهم يمثل معلومات مستخدم واحد
const users = [
    { id: 1, name: "Mhamad" },
    { id: 2, name: "Sara" },
    { id: 3, name: "Ziad" }
];

// و الذي وضعنا فيه محتوى صفحة المستخدمين <UsersPage> هنا قما بتعريف المكوّن
export default function UsersPage() {
    return (
        <div className="page users">
            <h1>Users Page</h1>
            <p>{users.length} users have been found.</p>
            <ul>
                {users.map(user => (
                    <li key={user.id} >
                        <Link to={`/users/${user.name}`}>{user.name}</Link>
                    </li>
                ))}
            </ul>
        </div>
    )
}

// react-router-dom هنا قمنا بتضمين ما نحتاجه من المكتبة
import { useParams, Link } from "react-router-dom";

// و الذي حددنا فيه كيف سيتم عرض صفحة المستخدم <ProfilePage> هنا قما بتعريف المكوّن
export default function ProfilePage() {

    // لتخزين جميع المعلومات الدينامكية التي تم تمريرها في الرابط useParams() هنا قمنا باستخدام الدالة
    // params.username فعلياً الرابط يحتوي على إسم المستخدم فقط و الذي أصبح بالإمكان الوصول إليه هكذا
    const params = useParams();

    return (
        <div className="page profile">
            <h1>{params.username}'s Profile</h1>
            <p>You are viewing {params.username}'s profile.</p>
            <div>
                <Link to="/users" className="btn">Back to users</Link>
            </div>
        </div>
    )
}

// react-router-dom هنا قمنا بتضمين ما نحتاجه من المكتبة
import { Link } from "react-router-dom";

// و الذي حددنا فيه ما سيتم عرضه للمستخدم عند الدخول لرابط غير موجود <NotFoundPage> هنا قما بتعريف المكوّن
export default function NotFoundPage() {
    return (
        <div className="page">
            <h1>Error 404 - Page Not Found!</h1>
            <p>The page you are looking for has been removed or its URL has been changed.</p>
            <div>
                <Link to="/" className="btn">Go to Home Page</Link>
            </div>
        </div>
    )
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f5f5f5;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

h1 {
    font-size: 1.6em;
    font-weight: normal;
    margin-bottom: 1em;
}

p {
    color: gray;
    margin: .6em 0;
    line-height: 2.2em;
}

a {
    text-decoration: none;
}

.app {
    display: flex;
    flex-direction: column;
    margin: 1em;
}

nav {
    flex: 0;
    background-color: #4a5ec9;
    border-radius: 20px;
    margin-bottom: 1.5em;
}

nav a {
    display: inline-block;
    color: #a2aff9;
    margin: 0.5em 0.25em;
    padding: 0.5em 1em;
    font-size: 18px;
    border-radius: 20px;
    transition: all .3s;
}

nav a.active,
nav a:hover {
    color: white;
    background-color: #657cff;
}

.page {
    border-radius: 20px;
    padding: 2em 1em;
    background-color: white;
}

.users ul {
    margin-top: 2em;
    list-style-type: none;
}

.users ul li {
    margin-bottom: 1em;
}

.users ul li a {
    padding: 10px 15px;
    display: block;
    box-shadow: 1px 1px 4px #ddd;
    border-radius: 10px;
    color: crimson;
}

.btn {
    height: 2.6em;
    line-height: 2.6em;
    padding: 0 1.4em;
    color: whitesmoke;
    background-color: #4a5ec9;
    display: inline-block;
    border-radius: 6px;
    margin-top: 1.2em;
}