Uumbizaji wa URL na Routing katika React- Mwongozo wa Kutumia React Router

Katika programu ya React, uumbizaji wa URL na routing huchukua jukumu muhimu katika kusogeza kurasa na kuonyesha maudhui yanayolingana. Ili kudhibiti routing katika React, tunaweza kutumia maktaba. Huu hapa ni mwongozo wa kimsingi wa jinsi ya kutumia kuunda URL na kushughulikia katika programu yako ya React. React Router React Router routing

 

Sakinisha React Router

Fungua saraka ya mradi wako kwenye terminal na endesha amri ifuatayo ya kusakinisha: React Router npm install react-router-dom

Ingiza vipengele muhimu kutoka kwenye kijenzi chako cha React. React Router

 

Bainisha Njia

Tumia kijenzi kukunja programu yako ya React na uweke umbizo la msingi la URL. <BrowserRouter>

Tumia <Route> kijenzi kufafanua njia katika programu yako.

Mfano:

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

 

Fafanua Link s

Tumia kijenzi kuunda urambazaji katika programu yako. <Link> link

Mfano:

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

 

Vigezo vya Njia ya Ufikiaji

Tumia <Route> kijenzi kilicho na path sifa katika umbizo /users/:id ili kufikia vigezo vya njia.

Ndani ya sehemu iliyofafanuliwa na <Route>, unaweza kutumia useParams() kufikia maadili ya vigezo vya njia.

Mfano:

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

 

Tumia Switch na Redirect

Tumia kijenzi kutoa njia ya kwanza inayolingana na njia pekee. <Switch>

Tumia kijenzi kwa watumiaji kutoka kwa njia moja maalum hadi nyingine. <Redirect> redirect

Mfano:

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

 

Hizi ni baadhi ya dhana za kimsingi za umbizo la URL na routing katika React using. Kwa kutumia, unaweza kuunda programu zinazonyumbulika za React zenye uwezo wa kusogeza na kuonyesha maudhui mbalimbali kulingana na URL. React Router React Router