Барои чӣ китобхонаи react-router-dom дар React…

react-router-dom истифода мешавад барои сохтани барномаҳои як саҳифаӣ (SPA) дар React, таъмин кардани маршрутсозии дар ҷониби мизоҷ.

Барои чӣ лозим аст?

Навигатсия: Имкон медиҳад, ки корбарон байни "саҳифаҳо" (компонентҳо) гуногун гузаранд бе пурра навсозии саҳифа.
Идоракунии URL: URL-и ҳозираро дар сатри суроғаи браузер ҳамоҳанг мекунад бо компоненти намоишӣ.
Маршрутсозии динамикӣ: Имкон медиҳад, ки маршрутҳоро бо параметрҳо (масалан, /users/:id) муайян кунад барои боркунии маълумоти махсус.
Навигатсияи барномавӣ: Имкон медиҳад, ки корбарро тавассути коди барномавӣ равона кунад (масалан, пас аз нигоҳ доштани маълумот бо муваффақият).

Компонентҳои асосӣ:

BrowserRouter: Қуттӣ барои барнома, ки API History-ро барои ҳамоҳангсозии URL истифода мебарад.
Routes: Контейнер барои муайян кардани маршрутҳо.
Route: Муайян мекунад мувофиқат байни URL ва компонент.
Link: Компонент барои эҷоди пайвандҳо, ки аз нав боркунии саҳифаро пешгирӣ мекунанд.
useNavigate: Hook барои навигатсияи барномавӣ.
useParams: Hook барои гирифтани параметрҳои маршрут аз URL.

Маслиҳат барои истифода:

// 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-router-dom дар React истифода мешавад?