ตอบสนองเราเตอร์
Create React App ไม่รวมการกำหนดเส้นทางหน้า
React Router เป็นโซลูชันยอดนิยม
เพิ่ม React Router
ในการเพิ่ม React Router ในแอปพลิเคชันของคุณ ให้รันสิ่งนี้ในเทอร์มินัลจากไดเรกทอรีรากของแอปพลิเคชัน:
npm i -D react-router-dom
หมายเหตุ:บทช่วยสอนนี้ใช้ React Router v6
หากคุณกำลังอัปเกรดจาก v5 คุณจะต้องใช้แฟล็ก @latest:
npm i -D react-router-dom@latest
โครงสร้างโฟลเดอร์
ในการสร้างแอปพลิเคชันที่มีหลายเส้นทางของเพจ เรามาเริ่มกันที่โครงสร้างไฟล์กันก่อน
ภายในsrc
โฟลเดอร์นั้น เราจะสร้างโฟลเดอร์ที่
pages
มีชื่อหลายไฟล์:
src\pages\
:
Layout.js
Home.js
Blogs.js
Contact.js
NoPage.js
แต่ละไฟล์จะมีส่วนประกอบ React พื้นฐาน
การใช้งานพื้นฐาน
ตอนนี้เราจะใช้เราเตอร์ของเราในindex.js
ไฟล์ ของเรา
ตัวอย่าง
ใช้ React Router เพื่อกำหนดเส้นทางไปยังเพจตาม URL:
index.js
:
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"));
ตัวอย่างที่อธิบาย
เราห่อเนื้อหาของเราก่อนด้วย<BrowserRouter>
.
จากนั้นเรากำหนดของ<Routes>
เรา แอปพลิเคชันสามารถมีได้หลาย<Routes>
รายการ ตัวอย่างพื้นฐานของเราใช้เพียงตัวอย่างเดียวเท่านั้น
<Route>
s สามารถซ้อนกันได้ อันแรก<Route>
มีพาธของ/
และแสดงผลLayout
ส่วนประกอบ
การสืบทอดที่ซ้อนกัน<Route>
และเพิ่มไปยังเส้นทางหลัก ดังนั้นblogs
เส้นทางจึงถูกรวมเข้ากับพา
เรน /blogs
ต์และกลายเป็น
เส้นทางHome
คอมโพเนนต์ไม่มีเส้นทาง แต่มี
index
แอตทริบิวต์ ที่ระบุเส้นทางนี้เป็นเส้นทางเริ่มต้นสำหรับเส้นทางหลัก ซึ่งก็/
คือ
การตั้งค่าpath
to *
จะทำหน้าที่เป็นตัวรับทั้งหมดสำหรับ URL ที่ไม่ได้กำหนด เหมาะสำหรับหน้าข้อผิดพลาด 404
หน้า / องค์ประกอบ
องค์ประกอบLayout
มี
<Outlet>
และ<Link>
องค์ประกอบ
แสดง เส้นทาง<Outlet>
ปัจจุบันที่เลือก
<Link>
ใช้เพื่อตั้งค่า URL และติดตามประวัติการเข้าชม
ทุกครั้งที่เราเชื่อมโยงไปยังเส้นทางภายใน เราจะใช้<Link>
แทน<a href="">
.
"เส้นทางเค้าโครง" เป็นองค์ประกอบที่ใช้ร่วมกันที่แทรกเนื้อหาทั่วไปในทุกหน้า เช่น เมนูการนำทาง
Layout.js
:
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;
Home.js
:
const Home = () => {
return <h1>Home</h1>;
};
export default Home;
Blogs.js
:
const Blogs = () => {
return <h1>Blog Articles</h1>;
};
export default Blogs;
Contact.js
:
const Contact = () => {
return <h1>Contact Me</h1>;
};
export default Contact;
NoPage.js
:
const NoPage = () => {
return <h1>404</h1>;
};
export default NoPage;