บทช่วย สอนตอบโต้

หน้าแรก แนะนำตัว ตอบสนอง เริ่มต้น ตอบสนอง ES6 React Render HTML ตอบโต้ JSX ส่วนประกอบปฏิกิริยา คลาสตอบโต้ ตอบสนองอุปกรณ์ประกอบฉาก ปฏิกิริยาเหตุการณ์ เงื่อนไขการตอบสนอง รายการตอบโต้ แบบฟอร์มตอบโต้ ตอบสนองเราเตอร์ บันทึกโต้ตอบ ตอบสนอง CSS จัดแต่งทรงผม ตอบสนอง Sass จัดแต่งทรงผม

ตะขอตอบสนอง

ตะขอคืออะไร? ใช้สถานะ ใช้เอฟเฟกต์ ใช้บริบท ใช้Ref ใช้ลด ใช้โทรกลับ ใช้บันทึก ตะขอแบบกำหนดเอง

แบบฝึกหัดตอบโต้

ตอบคำถาม แบบฝึกหัดตอบโต้ ใบรับรองปฏิกิริยา

ตอบสนองเราเตอร์


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แอตทริบิวต์ ที่ระบุเส้นทางนี้เป็นเส้นทางเริ่มต้นสำหรับเส้นทางหลัก ซึ่งก็/คือ

การตั้งค่าpathto *จะทำหน้าที่เป็นตัวรับทั้งหมดสำหรับ URL ที่ไม่ได้กำหนด เหมาะสำหรับหน้าข้อผิดพลาด 404


w3schools CERTIFIED . 2022

ได้รับการรับรอง!

ทำโมดูล React ทำแบบฝึกหัด ทำข้อสอบ และได้รับการรับรองจาก w3schools!!

$95 ลงทะเบียน

หน้า / องค์ประกอบ

องค์ประกอบ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;