سلام امیدوارم حالتون خوب باشه.

در فریم‌ورک‌های جاوااسکریپتی مثل Next.js، مفهوم App Router و Page Router به دو نوع مختلف از سیستم‌های Routing اشاره می‌کنه، هرکدوم برای مدیریت Routing بین صفحات استفاده می‌شوند، اما با رویکردهای متفاوت.

Page Router

 همونطور که از اسمش مشخصه، این نوع Routing مبتنی بر صفحات و Page‌ها هستند، بیشتر توضیح میدم خدمتتون...

استفاده از این سیستم Routing بیشتر در فریم‌ورک‌هایی مثل Next.js رایج است که در آن ساختار فایل‌ها به‌طور مستقیم نمایانگر ساختار URL است.

در Next.js، از Page Router استفاده می‌شود و شما می‌توانید با ساختن یک فایل، به‌صورت خودکار مسیریابی یا Routing رو انجام دهید، حالا به چه صورت؟! به مثال زیر توجه کنید:

pages/
  ├── index.js
  ├── about.js
  ├── blog/
      └── [id].js

• index.js: صفحه‌ی اصلی را نمایش می‌دهد و مسیر آن / است.
• about.js: صفحه‌ی «درباره ما» را نشان می‌دهد و مسیر آن /about است.
• و فایل .js[id] برای نمایش پست‌های بلاگ استفاده می‌شود و مسیر آن /blog/[id] خواهد بود.

App Router

اگر تا به حال با سیستم Routing اپلیکیشن‌های ریکت که مبتنی بر React-Router-Dom هستند کار کرده باشید خیلی راحت‌تر میتونید درک کنید که میخوام راجب چی صحبت کنم.

در سیستم App Routing مسیریابی از طریق کد و کامپوننت‌ها مدیریت میشه و همانطور که گفتم، معمولا از کتابخانه‌هایی ماننده React-Router-Dom برای استفاده از این سیستم Routing استفاده میشود، بیشتر در پروژه‌های React و SPA (Single Page Application) رایج است که کل برنامه در یک فایل HTML بارگذاری شده و مسیریابی به‌صورت داینامیک انجام می‌شود.

تصور کنید ساختار پروژه به شکل زیر است: 

src/
  ├── components/
      ├── Home.js
      ├── About.js
      ├── Blog.js
  └── App.js

پس از نصب React-Router-Dom میتونید، به شکل زیر عمل کنید: 

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Blog from './components/Blog';
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/blog/:id" element={<Blog />} />
      </Routes>
    </Router>
  );
}
export default App;

و نهایتا اگر بخوام یک جمع بندی کنم خدمتتون، باید عرض کنم که، در Next.js (Page Routing)، مسیریابی به‌صورت خودکار با ایجاد فایل‌ها انجام می‌شود و در React (App Routing)، شما باید به‌صورت دستی مسیرها را تعریف و کنترل کنید.

امیدوارم متوجه شده باشید، اگر باز هم ابهامی وجود داره حتما بگید تا بیشتر راجبش صحبت کنیم، اگر دوست داشتید میتونید لینک زیر رو هم مطالعه کنید :)

لینک 🔗