Pemformatan URL dan Routing dalam React- Panduan Menggunakan React Router

Dalam aplikasi React, pemformatan URL dan routing memainkan peranan penting dalam menavigasi halaman dan memaparkan kandungan yang sepadan. Untuk mengurus routing dalam React, kita boleh menggunakan perpustakaan. Berikut ialah panduan asas tentang cara menggunakan untuk memformat URL dan mengendalikan dalam aplikasi React anda. React Router React Router routing

 

Pasang React Router

Buka direktori projek anda di terminal dan jalankan arahan berikut untuk memasang: React Router npm install react-router-dom

Import komponen yang diperlukan dari ke dalam komponen React anda. React Router

 

Tentukan Laluan

Gunakan komponen untuk membalut aplikasi React anda dan tetapkan format URL asas. <BrowserRouter>

Gunakan <Route> komponen untuk menentukan laluan dalam aplikasi anda.

Contoh:

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>  
 );  
}  

 

Takrifkan Link s

Gunakan komponen untuk membuat navigasi dalam aplikasi anda. <Link> link

Contoh:

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>  
 );  
}  

 

Parameter Laluan Akses

Gunakan <Route> komponen dengan path atribut dalam format /users/:id untuk mengakses parameter laluan.

Dalam komponen yang ditakrifkan oleh <Route>, anda boleh gunakan useParams() untuk mengakses nilai parameter laluan.

Contoh:

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

 

Gunakan Switch dan Redirect

Gunakan komponen untuk hanya memaparkan laluan pertama yang sepadan dengan laluan. <Switch>

Gunakan komponen kepada pengguna dari satu laluan tertentu ke laluan lain. <Redirect> redirect

Contoh:

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>  
 );  
}  

 

Ini adalah beberapa konsep asas pemformatan URL dan routing dalam React menggunakan. Dengan menggunakan, anda boleh mencipta aplikasi React yang fleksibel dengan keupayaan untuk menavigasi dan memaparkan pelbagai kandungan berdasarkan URL. React Router React Router