Pemformatan URL dan Routing Bereaksi- Panduan Penggunaan React Router

Dalam aplikasi React, pemformatan URL dan routing memainkan peran penting dalam menavigasi halaman dan menampilkan konten yang sesuai. Untuk mengatur routing di React, kita bisa menggunakan library. Berikut adalah panduan dasar tentang cara menggunakan untuk memformat URL dan menanganinya di aplikasi React Anda. React Router React Router routing

 

Install React Router

Buka direktori proyek Anda di terminal dan jalankan perintah berikut untuk menginstal: React Router npm install react-router-dom

Impor komponen yang diperlukan dari ke dalam komponen React Anda. React Router

 

Tentukan Rute

Gunakan komponen untuk membungkus aplikasi React Anda dan menyetel format URL dasar. <BrowserRouter>

Gunakan <Route> komponen untuk menentukan rute 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>  
 );  
}  

 

Tentukan Link s

Gunakan komponen untuk membuat navigasi di 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 Jalur Akses

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

Di dalam komponen yang ditentukan oleh <Route>, Anda dapat menggunakan useParams() untuk mengakses nilai parameter jalur.

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 merender rute pertama yang cocok dengan jalur saja. <Switch>

Gunakan komponen untuk pengguna dari satu jalur yang ditentukan ke yang 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 dasar pemformatan URL dan routing dalam React menggunakan. Dengan memanfaatkan, Anda dapat membuat aplikasi React yang fleksibel dengan kemampuan untuk menavigasi dan menampilkan berbagai konten berdasarkan URL. React Router React Router