การจัดรูปแบบ URL และ Routing ในการตอบสนอง- คู่มือการใช้งาน React Router

ในแอปพลิเคชัน React การจัดรูปแบบ URL และ routing มีบทบาทสำคัญในการนำทางเพจและแสดงเนื้อหาที่เกี่ยวข้อง ในการจัดการ 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