close

Formáidiú URL agus Routing in React- Treoir maidir le húsáid React Router

In iarratas React, formáidiú URL agus routing tá ról ríthábhachtach aige maidir le leathanaigh a nascleanúint agus ábhar comhfhreagrach a thaispeáint. Chun bainistiú a dhéanamh routing in React, is féidir linn an leabharlann a úsáid. Seo treoir bhunúsach maidir le conas URLanna a fhormáidiú agus a láimhseáil i d’fheidhmchlár React. React Router React Router routing

 

Suiteáil React Router

Oscail do eolaire tionscadail sa teirminéal agus rith an t-ordú seo a leanas chun é a shuiteáil: React Router npm install react-router-dom

Iompórtáil na comhpháirteanna riachtanacha isteach i do chomhpháirt React. React Router

 

Sainmhínigh Bealaí

Bain úsáid as an gcomhpháirt chun d'fheidhmchlár React a chumhdach agus bunfhormáid URL a shocrú. <BrowserRouter>

Bain úsáid as an <Route> gcomhpháirt chun bealaí a shainiú i d'iarratas.

Sampla:

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

 

Sainmhínigh Link s

Úsáid an chomhpháirt chun nascleanúint a chruthú i d'fheidhmchlár. <Link> link

Sampla:

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

 

Paraiméadair Conair Rochtana

Úsáid an <Route> chomhpháirt le path tréith san fhormáid /users/:id chun rochtain a fháil ar pharaiméadair an chosáin.

Laistigh den chomhpháirt atá sainithe ag an <Route>, is féidir leat é a úsáid useParams() chun rochtain a fháil ar luachanna na bparaiméadar cosáin.

Sampla:

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

 

Úsáid Switch agus Redirect

Bain úsáid as an gcomhpháirt chun an chéad bhealach a oireann don chosán amháin a sholáthar. <Switch>

Úsáid an chomhpháirt d' úsáideoirí ó chonair shonraithe amháin go ceann eile. <Redirect> redirect

Sampla:

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

 

Seo roinnt bunchoincheapa maidir le formáidiú URL agus routing in React ag baint úsáide as. Trí úsáid a bhaint as, is féidir leat feidhmchláir sholúbtha React a chruthú leis an gcumas ábhar éagsúla bunaithe ar an URL a nascleanúint agus a thaispeáint. React Router React Router