تنسيق URL وفي Routing React- دليل لاستخدام React Router

في تطبيق React ، routing يلعب تنسيق URL دورًا مهمًا في التنقل بين الصفحات وعرض المحتوى المقابل. للإدارة routing في React ، يمكننا استخدام المكتبة. فيما يلي دليل أساسي حول كيفية استخدام تنسيق عناوين URL والتعامل معها في تطبيق React الخاص بك. React Router React Router routing

 

ثَبَّتَ React Router

افتح دليل المشروع الخاص بك في المحطة وقم بتشغيل الأمر التالي للتثبيت: React Router npm install react-router-dom

قم باستيراد المكونات الضرورية من مكون React الخاص بك. React Router

 

تحديد الطرق

استخدم المكون لالتفاف تطبيق React الخاص بك وتعيين تنسيق عنوان URL أساسي. <BrowserRouter>

استخدم <Route> المكون لتحديد المسارات في تطبيقك.

مثال:

import { BrowserRouter, Route } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Route exact path="/" component={Home} />  
      <Route path="/about" component={About} />  
      <Route path="/products" component={Products} />  
    </BrowserRouter>  
 );  
}  

 

عرّف Link s

استخدم المكون لإنشاء تنقلات في تطبيقك. <Link> link

مثال:

import { Link } from 'react-router-dom';  
  
function Navigation() {  
  return( 
    <nav>  
      <ul>  
        <li>  
          <Link to="/">Home</Link>  
        </li>  
        <li>  
          <Link to="/about">About</Link>  
        </li>  
        <li>  
          <Link to="/products">Products</Link>  
        </li>  
      </ul>  
    </nav>  
 );  
}  

 

الوصول إلى معلمات المسار

استخدم <Route> المكون بسمة path في التنسيق /users/:id للوصول إلى معلمات المسار.

ضمن المكون المحدد بواسطة <Route> ، يمكنك استخدامه useParams() للوصول إلى قيم معلمات المسار.

مثال:

import { useParams } from 'react-router-dom';  
  
function User() {  
  const { id } = useParams();  
  
  return <div>User ID: {id}</div>;  
}  

 

استخدم Switch و Redirect

استخدم المكون لعرض المسار الأول الذي يطابق المسار فقط. <Switch>

استخدم المكون للمستخدمين من مسار محدد إلى آخر. <Redirect> redirect

مثال:

import { Switch, Route, Redirect } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Switch>  
        <Route exact path="/" component={Home} />  
        <Route path="/about" component={About} />  
        <Route path="/products" component={Products} />  
        <Redirect to="/" />  
      </Switch>  
    </BrowserRouter>  
 );  
}  

 

هذه بعض المفاهيم الأساسية لتنسيق URL واستخدام routing React. من خلال الاستخدام ، يمكنك إنشاء تطبيقات React مرنة مع القدرة على التنقل وعرض المحتوى المتنوع بناءً على عنوان URL. React Router React Router