เอา params จากด้านนอกเส้นทางส่วนประกอบในตอบโต้ Router 6

Question 1

ฉันต้องสร้างขึ้น 2 ส่วนประกอบที่ชื่อ Layout แล้ว Homepage. งั้นฉันต้องเพิ่ม Layout ตอบแทนแล้วด้วยอะไรซักอย่า 2 เส้นทางอยู่ในนั้นกับ Homepage ส่วนประกอบ. ตอนนี้ฉันพยายามที่จะเข้าใจ params โดย useParams ตะขอในใจ Layout ส่วนประกอบขณะที่ฉันในตำแหน่งของ /10. มันเป็นไปได้มั๊ย? มันทำให้ช่องว่างในด้านของฉัน.

App.js

const App = () => {
  return (
    <Layout>
      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="/:id" element={<Homepage />} />
      </Routes>
    </Layout>
  );
}

Layout.js

import { useParams } from "react-router-dom";

const Layout = () => {
  const params = useParams();
  console.log(params);
  return(
    <div>
      Hello World
    </div>
  );
}

Question 2

Layout ส่วนประกอบต้องการที่จะจัดการพามัน children ดังนั้นเส้นทางนี้เป็นที่จริงค่าการแสดงผล. ฉันพยายามนี้และถึงแม้ว่ามันไม่เหมือนจะเลือกขึ้นมาบนเส้นทาง params. ขอโทษมันไม่ทันทีชัดเจนว่าทำไมตอนนี้

แต่

มันเป็นห้องรูปแบบสำหรับการแสดงผลผังแป้นพิมพ์คือการจัดการพาคนผังแป้นพิมพ์ส่วนประกอบเข้าไปในเส้นทางและมีการจัดวางจัดการพาน Outlet สำหรับมันเด็กๆ/รอบการเส้นทางที่จะเป็นค่าการแสดงผลออกไปนะ

const Layout = () => {
  const { id } = useParams();

  useEffect(() => {
    console.log({ id });
  }, []);

  return (
    <div>
      Hello World
      <Outlet /> // <-- nested routes output here
    </div>
  );
};

เส้นทาง

<Routes>
  <Route path="/" element={<Layout />}>
    <Route path=":id" element={<Homepage />} /> // <-- rendered into outlet
    <Route index element={<Homepage />} />      // <-- rendered into outlet
  </Route>
</Routes>

Drew Reese · Answer 1 · 2021-11-23T21:10:32

Layout ส่วนประกอบต้องการที่จะจัดการพามัน children ดังนั้นเส้นทางนี้เป็นที่จริงค่าการแสดงผล. ฉันพยายามนี้และถึงแม้ว่ามันไม่เหมือนจะเลือกขึ้นมาบนเส้นทาง params. ขอโทษมันไม่ทันทีชัดเจนว่าทำไมตอนนี้

แต่

มันเป็นห้องรูปแบบสำหรับการแสดงผลผังแป้นพิมพ์คือการจัดการพาคนผังแป้นพิมพ์ส่วนประกอบเข้าไปในเส้นทางและมีการจัดวางจัดการพาน Outlet สำหรับมันเด็กๆ/รอบการเส้นทางที่จะเป็นค่าการแสดงผลออกไปนะ

const Layout = () => {
  const { id } = useParams();

  useEffect(() => {
    console.log({ id });
  }, []);

  return (
    <div>
      Hello World
      <Outlet /> // <-- nested routes output here
    </div>
  );
};

เส้นทาง

<Routes>
  <Route path="/" element={<Layout />}>
    <Route path=":id" element={<Homepage />} /> // <-- rendered into outlet
    <Route index element={<Homepage />} />      // <-- rendered into outlet
  </Route>
</Routes>

เอา params จากด้านนอกเส้นทางส่วนประกอบในตอบโต้ Router 6

คำถาม

คำตอบที่ดีที่สุด

แต่

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่