إستعمال الروابط الداخلية في ريآكت

في React، تستطيع استخدام روابط داخلية باستخدام react-router-dom أيضًا، حتى في صفحة ويب واحدة (وهي عبارة عن عناصر تحكم توجيه).

وذلك باستخدام عناصر التحكم مثل <Link> و <NavLink> و <Route> في أي مكان داخل مكونات React الخاصة بك لإنشاء روابط داخلية.

مثال لاستخدام عنصر التحكم <Link> لإنشاء رابط داخلي كما يلي:

import { Link } from 'react-router-dom';

function MyComponent() {
  return (
    <div>
      <h1>Welcome to my website!</h1>
      <p>Click <Link to="/about">here</Link> to learn more about me.</p>
    </div>
  );
}

كما ترى من خلال  <Link> تمكنا من إنشاء رابط داخلي يؤدي إلى صفحة "حول" (/about) في نفس التطبيق، وعند النقر على الرابط ، سيتم تحديث المحتوى المعروض في التطبيق دون إعادة تحميل الصفحة بالكامل.

ويمكنك أيضا استخدام عنصر التحكم <Route> لتحديد المسارات المتناغمة مع الروابط الداخلية، والذي يستخدم لإظهار محتوى معين عند زيارة رابط معين.

import { Route } from 'react-router-dom';

function MyComponent() {
  return (
    <div>
      <h1>Welcome to my website!</h1>
      <p>Click <Link to="/about">here</Link> to learn more about me.</p>
      <Route path="/about">
        <About />
      </Route>
    </div>
  );
}

حيث يتم عرض محتوى معين (component About) عند زيارة الرابط /about، وعند زيارة الرابط، سيتم تحديث المحتوى المعروض في التطبيق دون إعادة تحميل الصفحة بالكامل.

وتستطيع استخدام هذه العناصر  داخل مكونات أخرى لإنشاء روابط داخلية متعددة الطبقات ومعقدة حسب الحاجة.

نعم يوجد، إذا كنت تريد استخدام react-router-dom في ذات الصفحة، يمكن استخدام "HashRouter" بدلاً من "BrowserRouter" في ملف الـمكون الجذر "App" أو غيره من المكونات الأبناء، وذلك للسماح بتحديد مسارات بدءًا من الرابط الحالي للموقع. على سبيل المثال:

import { HashRouter, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <HashRouter>
      <Switch>
        <Route exact path="/" component={LandingPage} />
      </Switch>
    </HashRouter>
  );
}

سيحل هذا المشكلة.

في حالة صفحة ويب واحدة، يمكن استخدام الروابط العادية (anchor links) مثلما هو الحال في الجافاسكريبت، حيث لا يحتاج الأمر إلى استخدام react-router-dom لأنه لا يتم تحويل المستخدم إلى صفحة أخرى. 

عند استخدام الروابط العادية، يمكن استخدام الوظائف المتاحة في JavaScript لتحديث العرض الحالي دون الحاجة إلى إعادة تحميل الصفحة بأكملها. على سبيل المثال، يمكن استخدام `window.scrollTo()` للتمرير إلى الجزء المحدد من الصفحة، أو استخدام `document.getElementById()` للوصول إلى العناصر الفرعية داخل صفحة ويب وتحديثها.

مع ذلك، إذا كنت ترغب في تطبيق المبادئ الخاصة بـ React في صفحة ويب واحدة، يمكن استخدام React Router لتوفير نظام توجيه داخلي دون الحاجة إلى إعادة تحميل الصفحة بأكملها. يمكن استخدام `Link` component في React Router لإنشاء روابط داخليه بشكل مشابه للروابط العادية.

يمكن استخدام `BrowserRouter` component في React Router لتوفير نظام توجيه داخلي للصفحة ويب الواحدة، حيث يتم تحديث عنوان URL بدون الحاجة إلى إعادة تحميل الصفحة بأكملها. ويمكن استخدام `Route` component لتحديد المسار الخاص بكل عنصر في صفحة ويب وتحميل المكونات المطابقة في حالة تحديد المسار المطابق.

على سبيل المثال، يمكن استخدام الكود التالي لتوفير نظام توجيه داخلي في صفحة ويب واحدة باستخدام React Router:

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/">الصفحة الرئيسية</Link>
          </li>
          <li>
            <Link to="/about">من نحن</Link>
          </li>
          <li>
            <Link to="/contact">اتصل بنا</Link>
          </li>
        </ul>
      </nav>
      
      <Route path="/" exact>
        <HomePage />
      </Route>
      <Route path="/about">
        <AboutPage />
      </Route>
      <Route path="/contact">
        <ContactPage />
      </Route>
    </BrowserRouter>
  );
}

في هذا المثال، يتم تحديد الروابط الداخلية باستخدام `Link` component، ويتم تحديد المسارات والمكونات المطابقة باستخدام `Route` component. النظام الداخلي للتوجيه يتيح للمستخدم التنقل بين المكونات المطابقة دون الحاجة إلى إعادة تحميل الصفحة بأكملها.