close

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 లను నిర్వచించండి

మీ అప్లికేషన్‌లో నావిగేషన్‌లను సృష్టించడానికి కాంపోనెంట్‌ని ఉపయోగించండి. <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