URL Biçimlendirme ve Routing React- Kullanma Kılavuzu React Router

Bir React uygulamasında, URL biçimlendirmesi ve routing sayfalarda gezinmede ve ilgili içeriğin görüntülenmesinde çok önemli bir rol oynar. React'te yönetmek için routing kütüphaneyi kullanabiliriz. Burada, URL'leri biçimlendirmek ve React uygulamanızda işlemek için nasıl kullanılacağına ilişkin temel bir kılavuz bulunmaktadır. React Router React Router routing

 

Düzenlemek React Router

Terminalde proje dizininizi açın ve yüklemek için aşağıdaki komutu çalıştırın: React Router npm install react-router-dom

Gerekli bileşenleri adresinden React bileşeninize aktarın. React Router

 

Rotaları Tanımla

React uygulamanızı sarmak ve bir temel URL formatı ayarlamak için bileşeni kullanın. <BrowserRouter>

<Route> Uygulamanızda yolları tanımlamak için bileşeni kullanın .

Örnek:

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

 

tanımla Link _

Uygulamanızda gezintiler oluşturmak için bileşeni kullanın. <Link> link

Örnek:

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

 

Erişim Yolu Parametreleri

Yol parametrelerine erişmek için biçimde <Route> bir özniteliğe sahip bileşeni kullanın. path /users/:id

ile tanımlanan bileşen içinde, yol parametrelerinin değerlerine erişmek için <Route> kullanabilirsiniz. useParams()

Örnek:

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

 

kullanın Switch ve Redirect

Yalnızca yolla eşleşen ilk yolu oluşturmak için bileşeni kullanın. <Switch>

Bileşeni, belirtilen bir yoldan diğerine kullanıcılar için kullanın. <Redirect> redirect

Örnek:

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

 

routing Bunlar, URL biçimlendirmesinin ve React using ın bazı temel kavramlarıdır. kullanarak, URL'ye dayalı olarak çeşitli içeriklerde gezinme ve bunları görüntüleme becerisine sahip esnek React uygulamaları oluşturabilirsiniz. React Router React Router