Reactте react-router-dom китепканасы эмне үчүн…

react-router-dom Reactте бир беттик колдонмолорду (SPA) түзүү үчүн колдонулат жана кардар тараптуу маршруттоо камсыздайт.

Эмне үчүн керек?

Навигация: Колдонуучуларга толук баракчаны кайра жүктөбөстөн, ар кандай "баракчаларга" (компоненттерге) өтүүгө мүмкүнчүлүк берет.
URL башкаруу: Браузердин дарек тилкесиндеги учурдагы URL менен көрсөтүлгөн компоненттин синхрондоштурат.
Динамикалык маршруттоо: Параметрлер менен маршруттарды аныктоого мүмкүндүк берет (мисалы, /users/:id) жана өзгөчө маалыматтарды жүктөйт.
Программалык навигация: Код аркылуу колдонуучуну багыттоого мүмкүндүк берет (мисалы, маалыматтарды ийгиликтүү сактаган соң).

Негизги компоненттер:

BrowserRouter: URL менен синхрондоштуруу үчүн API History колдонгон тиркеменин капкагы.
Routes: маршруттарды аныктоо үчүн контейнер.
Route: URL жана компоненттин ортосундагы шайкештикти аныктайт.
Link: баракчаны кайра жүктөөнү алдын алган шилтемелер түзүүчү компонент.
useNavigate: программалык навигация үчүн hook.
useParams: URLден маршрут параметрлерин алуу үчүн hook.

Колдонуу мисалы:

// App.js
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Башкы бет</Link> {' '}
        <Link to="/about">Биз жөнүндө</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Динамикалык маршруттун мисалы */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Reactте react-router-dom китепканасы эмне үчүн колдонулат?