react-applications-ریکت-کاربردهادوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

برای ایجاد صفحات و مسیرها در React با استفاده از React Router، باید مراحل زیر را دنبال کنید:

۱. نصب React Router

ابتدا باید React Router را نصب کنید تا بتوانید مسیرها را مدیریت کنید.

npm install react-router-dom

 

۲. ایجاد ساختار اپلیکیشن

ساختار پایه‌ای اپلیکیشن شامل چندین صفحه است که می‌خواهیم بین آن‌ها مسیریابی کنیم. برای این کار ابتدا چند کامپوننت صفحه ایجاد می‌کنیم.

مثال: ایجاد صفحات

  1. صفحه Home:
// Home.js
import React from 'react';
const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the Home Page</p>
    </div>
  );
};
export default Home;

 

  1. صفحه About:

// About.js
import React from 'react';
const About = () => {
  return (
    <div>
      <h1>About Page</h1>
      <p>Learn more about us!</p>
    </div>
  );
};
export default About;

 

  1. صفحه Contact:
// Contact.js
import React from 'react';
const Contact = () => {
  return (
    <div>
      <h1>Contact Page</h1>
      <p>Get in touch with us!</p>
    </div>
  );
};
export default Contact;

 

۳. ایجاد مسیرها با React Router

حالا که صفحات را ایجاد کردیم، باید از BrowserRouter و Route برای تعریف مسیرها استفاده کنیم. همچنین، برای ایجاد نوار ناوبری، از Link استفاده می‌کنیم.

فایل اصلی App.js:

import React from 'react';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
const App = () => {
  return (
    <BrowserRouter>
      <div>
        {/* نوار ناوبری */}
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>
        {/* تعریف مسیرها */}
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};
export default App;

 

۴. توضیحات کد:

  1. BrowserRouter: این کامپوننت به‌عنوان پوشش‌دهنده‌ی مسیرهای اپلیکیشن استفاده می‌شود.
  2. Route: هر Route یک مسیر را مشخص می‌کند و با استفاده از ویژگی path مسیر URL را تعریف می‌کند و با ویژگی component کامپوننت مربوطه را نمایش می‌دهد.
    • exact: این ویژگی به Route کمک می‌کند تا فقط زمانی رندر شود که مسیر دقیقاً با URL مطابقت داشته باشد. بدون exact، هر مسیری که آغاز به تطابق با URL کند، رندر می‌شود.
  3. Link: این کامپوننت برای ناوبری بین صفحات استفاده می‌شود. برخلاف تگ <a>, که صفحه را مجدد بارگذاری می‌کند، Link باعث می‌شود تا مسیرها بدون بارگذاری مجدد صفحه تغییر کنند.

 

۵. پشتیبانی از مسیرهای داینامیک

گاهی اوقات نیاز دارید تا مسیرهایی با پارامترهای پویا ایجاد کنید. برای مثال، اگر بخواهید صفحه‌ی پروفایل کاربری را با شناسه خاصی نمایش دهید.

مثال: مسیر داینامیک (با استفاده از پارامتر)

  1. صفحه Profile:
// Profile.js
import React from 'react';
import { useParams } from 'react-router-dom';
const Profile = () => {
  const { userId } = useParams(); // دریافت پارامتر userId از URL
  return (
    <div>
      <h1>Profile Page</h1>
      <p>User ID: {userId}</p>
    </div>
  );
};
export default Profile;

 

  1. تعریف مسیر برای صفحه پروفایل با شناسه کاربر:
<Route path="/profile/:userId" component={Profile} />

 

در اینجا، :userId یک پارامتر داینامیک است که در URL قرار می‌گیرد. به عنوان مثال، اگر URL به شکل /profile/123 باشد، مقدار userId برابر با 123 خواهد بود.

 

۶. ایجاد مسیرهای پیشرفته‌تر

اگر بخواهید مسیری داشته باشید که در صورت دسترسی به یک مسیر خاص، کاربر را به صفحه‌ی دیگری هدایت کند (مثل ریدایرکت کردن)، می‌توانید از Redirect استفاده کنید.

مثال: ریدایرکت کردن:

import { Redirect, Route } from 'react-router-dom';
<Route path="/old-page">
  <Redirect to="/new-page" />
</Route>

 

این باعث می‌شود که هر زمان که کاربر به /old-page برود، به /new-page هدایت شود.

 

۷. نتیجه نهایی

با استفاده از React Router، توانستید:

  • صفحات مختلف را ایجاد کنید.
  • مسیرها را با استفاده از Route تعریف کنید.
  • از Link برای ایجاد نوار ناوبری و جابجایی بین صفحات استفاده کنید.
  • مسیرهای داینامیک و ریدایرکت‌ها را به راحتی پیاده‌سازی کنید.

این ابزار به شما امکان می‌دهد که یک اپلیکیشن تک‌صفحه‌ای (SPA) بسازید که در آن بارگذاری مجدد صفحه وجود ندارد و تجربه‌ی کاربری بسیار روان و سریع فراهم می‌شود.