URL ફોર્મેટિંગ અને Routing પ્રતિક્રિયામાં- ઉપયોગ કરવા માટેની માર્ગદર્શિકા React Router

પ્રતિક્રિયા એપ્લિકેશનમાં, URL ફોર્મેટિંગ અને routing પૃષ્ઠોને નેવિગેટ કરવામાં અને અનુરૂપ સામગ્રી પ્રદર્શિત કરવામાં નિર્ણાયક ભૂમિકા ભજવે છે. routing પ્રતિક્રિયામાં મેનેજ કરવા માટે, અમે લાઇબ્રેરીનો ઉપયોગ કરી શકીએ છીએ. તમારી પ્રતિક્રિયા એપ્લિકેશનમાં URL ને ફોર્મેટ કરવા અને હેન્ડલ કરવા માટે કેવી રીતે ઉપયોગ કરવો તે અંગેની મૂળભૂત માર્ગદર્શિકા અહીં છે. React Router React Router routing

 

ઇન્સ્ટોલ કરો React Router

ટર્મિનલમાં તમારી પ્રોજેક્ટ ડિરેક્ટરી ખોલો અને ઇન્સ્ટોલ કરવા માટે નીચેનો આદેશ ચલાવો: React Router npm install react-router-dom

તમારા પ્રતિક્રિયા ઘટકમાંથી જરૂરી ઘટકો આયાત કરો. React Router

 

રૂટ્સ વ્યાખ્યાયિત કરો

તમારી પ્રતિક્રિયા એપ્લિકેશનને લપેટવા માટે ઘટકનો ઉપયોગ કરો અને આધાર 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 તેનો ઉપયોગ કરીને પ્રતિક્રિયામાં છે. નો ઉપયોગ કરીને, તમે URL પર આધારિત વિવિધ સામગ્રી નેવિગેટ અને પ્રદર્શિત કરવાની ક્ષમતા સાથે લવચીક પ્રતિક્રિયા એપ્લિકેશનો બનાવી શકો છો. React Router React Router