Bộ định tuyến React

Tạo ứng dụng React không bao gồm định tuyến trang.

React Router là giải pháp phổ biến nhất.

Thêm bộ định tuyến React

Để thêm Bộ định tuyến React trong ứng dụng của bạn, hãy chạy phần này trong thiết bị đầu cuối từ thư mục gốc của ứng dụng:

Cấu trúc thư mục

Để tạo một ứng dụng có nhiều tuyến trang, trước tiên hãy bắt đầu với cấu trúc tệp.

Trong srcthư mục, chúng tôi sẽ tạo một thư mục có tên pagesvới một số tệp:

src\pages\:

• Layout.js
• Home.js
• Blogs.js
• Contact.js
• NoPage.js

Mỗi tệp sẽ chứa một thành phần React rất cơ bản.

Cách sử dụng cơ bản

Bây giờ chúng tôi sẽ sử dụng Bộ định tuyến của chúng tôi trong index.jstệp của chúng tôi.

import ReactDOM from "react-dom";
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>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Giải thích ví dụ

Chúng tôi kết thúc nội dung của chúng tôi đầu tiên với <BrowserRouter>.

Sau đó, chúng tôi xác định của chúng tôi <Routes>. Một ứng dụng có thể có nhiều <Routes>. Ví dụ cơ bản của chúng tôi chỉ sử dụng một.

<Route>s có thể được lồng vào nhau. Đầu tiên <Route>có một đường dẫn / và hiển thị Layoutthành phần.

Các s lồng nhau <Route>kế thừa và thêm vào tuyến mẹ. Vì vậy, blogsđường dẫn được kết hợp với cha mẹ và trở thành /blogs.

Tuyến Homethành phần không có đường dẫn nhưng có indexthuộc tính. Điều đó chỉ định tuyến đường này là tuyến đường mặc định cho tuyến đường chính /.

Việc đặt pathto *sẽ hoạt động như một công cụ bắt tất cả cho bất kỳ URL không xác định nào. Điều này là tuyệt vời cho một trang lỗi 404.

Trang / Thành phần

Thành Layoutphần có <Outlet>và <Link>các phần tử.

Kết <Outlet>xuất tuyến đường hiện tại đã chọn.

<Link>được sử dụng để đặt URL và theo dõi lịch sử duyệt web.

Bất cứ khi nào chúng tôi liên kết đến một đường dẫn nội bộ, chúng tôi sẽ sử dụng <Link> thay vì <a href="">.

"Lộ trình bố cục" là một thành phần được chia sẻ chèn nội dung chung trên tất cả các trang, chẳng hạn như menu điều hướng.

import { Outlet, Link } from "react-router-dom";

const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Outlet />
    </>
  )
};

export default Layout;

const Home = () => {
  return <h1>Home</h1>;
};

export default Home;

const Blogs = () => {
  return <h1>Blog Articles</h1>;
};

export default Blogs;

const Contact = () => {
  return <h1>Contact Me</h1>;
};

export default Contact;

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

export default NoPage;