ماهو basename في react router

تلك خاصية أي prop نمررها لمكون BrowserRouter في React Router، لإخباره بأن التطبيق لا يعمل على الدومين الرئيسي بل يعمل داخل مجلد فرعي، أي دومين فرعي.

بمعنى لو أردت وضع التطبيق داخل مجلد فرعي اسمه my-app، فستصبح الروابط كالتالي:

https://www.test.com/my-app/ (الصفحة الرئيسية)

صحفات أخرى
https://www.test.com/my-app/about 
https://www.test.com/my-app/contact 

بالتالي لو قمت باستخدام المسار كالتالي <Link to="/about">، فسيحاول المتصفح الذهاب إلى https://www.test.com/about ,`g; مسار خاطئ سيؤدي إلى صفحة خطأ 404 Not Found.

لذا من خلال basename أنت تخبر React Router أن المسار الأساسي لجميع روابطك هو /my-app، وبالتالي سيعرف كيف يبني الروابط بشكل صحيح.

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

function HomePage() {
  return <h1>الصفحة الرئيسية</h1>;
}

function AboutPage() {
  return <h1>صفحة من نحن</h1>;
}

function App() {
  return (
    
    <BrowserRouter basename="/my-app">
      <nav>
        <Link to="/">الرئيسية</Link> | <Link to="/about">من نحن</Link>
      </nav>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

اذاً ماهو ملف client.js

اسم الملف ليس إلزامي تستطيع تسميته كما تريد، لكن الأفضل هو client.js ويتم به وضع الكود الذي يضيف التفاعلية لواجهة المستخدم بعد استلام كود HTML من الخادم أي السيرفر، وذلك في حال سيتم استخدام الـ SSR بالمشروع.

أي  باستخدام React مع Express.js، لكن لا حاجة إلى طالما Next.js يوفر ذلك وأفضل: