URL-ის ფორმატირება და Routing React-ში- გამოყენების გზამკვლევი React Router

React აპლიკაციაში URL-ის ფორმატირება და routing გადამწყვეტი როლი თამაშობს გვერდებზე ნავიგაციაში და შესაბამისი შინაარსის ჩვენებაში. React-ში სამართავად routing, შეგვიძლია გამოვიყენოთ ბიბლიოთეკა. აქ არის ძირითადი სახელმძღვანელო, თუ როგორ გამოიყენოთ URL-ების ფორმატირება და დამუშავება თქვენს React აპლიკაციაში. React Router React Router routing

 

Დაინსტალირება React Router

გახსენით თქვენი პროექტის დირექტორია ტერმინალში და დააინსტალირეთ შემდეგი ბრძანება: React Router npm install react-router-dom

საჭირო კომპონენტების იმპორტი თქვენს React კომპონენტში. React Router

 

მარშრუტების განსაზღვრა

გამოიყენეთ კომპონენტი თქვენი React აპლიკაციის შესაფუთად და საბაზისო 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 React-ის გამოყენებით. გამოყენებით, თქვენ შეგიძლიათ შექმნათ მოქნილი React აპლიკაციები, ნავიგაციის და URL-ზე დაფუძნებული სხვადასხვა შინაარსის ჩვენების შესაძლებლობით. React Router React Router