Bộ định tuyến phản ứng

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 phản ứng

Để thêm React Router vào ứng dụng của bạn, hãy chạy cái này trong terminal 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 thư mục src , chúng ta sẽ tạo một thư mục có tên pages vớ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 ta sẽ sử dụng Bộ định tuyến trong tệp index.js .

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

Ví dụ giải thích

Trước tiên, chúng tôi gói nội dung của mình bằng <BrowserRouter> .

Sau đó, chúng tôi xác định <Routes> của mình. 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> có thể được lồng vào nhau. <Route> đầu tiên có đường dẫn / và hiển thị thành phần Layout .

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

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

Việc đặt path dẫn thành * sẽ đóng vai trò chung cho mọi URL không xác định. Điều này rất tốt cho một trang lỗi 404.

Trang/Thành phần

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

<Outlet> hiển thị 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à 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;