Router

React Router

Create React App sahifalararo marshrutlashni o'z ichiga olmaydi.

React Router eng mashhur yechim hisoblanadi.

React Router-ni Qo'shish

React Router-ni ilovangizga qo'shish uchun terminalda ilovaning asosiy katalogida quyidagi buyruqni ishga tushiring:

npm i -D react-router-dom

Agar siz v5 versiyasidan yangilayotgan bo'lsangiz, @latest flagini qo'shishingiz kerak:

npm i -D react-router-dom@latest

Papka Tuzilishi

Bir nechta sahifa yo'llari bo'lgan ilovani yaratish uchun avval fayl tuzilishi bilan boshlaymiz.

src papkasi ichida pages nomli papka yaratamiz va bir nechta fayllar qo'shamiz:

src/pages/:
- Layout.js
- Home.js
- Blogs.js
- Contact.js
- NoPage.js

Har bir fayl juda oddiy React komponentini o'z ichiga oladi.

Asosiy Foydalanish

Endi index.js faylimizda Router-dan foydalanamiz.

Misol: URL asosida sahifalarga yo'naltirish uchun React Router-dan foydalaning:

import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './pages/Layout';
import Home from './pages/Home';
import Blogs from './pages/Blogs';
import Contact from './pages/Contact';
import NoPage from './pages/NoPage';
 
export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Misolni Tushuntirish

Avvalo, biz <BrowserRouter> bilan kontentimizni o'rab olamiz.

Keyin biz <Routes> ni belgilaymiz. Ilovada bir nechta <Routes> bo'lishi mumkin. Bizning asosiy misolimiz faqat bittasini ishlatadi.

<Route> lar ichma-ich bo'lishi mumkin. Birinchi <Route> ning yo'li / bo'lib, Layout komponentini render qiladi.

Ichki <Route> lar ota yo'lni meros qilib oladi va unga qo'shiladi. Shuning uchun blogs yo'li ota yo'l bilan birlashtiriladi va /blogs bo'ladi.

Home komponenti yo'li yo'q, lekin index atributiga ega. Bu yo'lni ota yo'l uchun standart yo'l sifatida belgilaydi, ya'ni /.

* yo'lini belgilash har qanday aniqlanmagan URL-lar uchun "catch-all" (hammasini qamrab oluvchi) sifatida ishlaydi. Bu 404 xato sahifasi uchun juda yaxshi.

Sahifalar / Komponentlar

Layout komponenti <Outlet> va <Link> elementlariga ega.

<Outlet> joriy tanlangan yo'ni render qiladi.

<Link> URL-ni belgilash va ko'rish tarixini saqlash uchun ishlatiladi.

Ichki yo'lga havola qilish uchun har doim <Link> dan foydalanamiz, <a href=""> dan emas.

"Layout yo'li" - bu barcha sahifalarda umumiy kontentni qo'shadigan bo'linma, masalan, navigatsiya menyusi.

Layout.js:

import { Outlet, Link } from 'react-router-dom';
 
const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Bosh sahifa</Link>
          </li>
          <li>
            <Link to="/blogs">Bloglar</Link>
          </li>
          <li>
            <Link to="/contact">Aloqa</Link>
          </li>
        </ul>
      </nav>
 
      <Outlet />
    </>
  );
};
 
export default Layout;

Home.js:

const Home = () => {
  return <h1>Bosh sahifa</h1>;
};
 
export default Home;

Blogs.js:

const Blogs = () => {
  return <h1>Blog maqolalari</h1>;
};
 
export default Blogs;

Contact.js:

const Contact = () => {
  return <h1>Aloqa</h1>;
};
 
export default Contact;

NoPage.js:

const NoPage = () => {
  return <h1>404</h1>;
};
 
export default NoPage;