ตอบโต้ Router v6 ไม่ได้ทำงานกับที่อยู่ URL Slugs

Question 1

ฉันพยายามจะทำให้ตอบโต้-router-dom ทำงานด้วยของธรรมดาแบบที่อยู่ url:/ผู้ใช้/{ชื่อ}แต่สำหรับเหตุผลบางอย่างไม่สามารถเอามันออกจะโหลดหน้าเว็บที่อยู่ url ของปลอกกระสุนสำหรับชื่อนะ

นี่คือการกลับมาของผมแอ๊ปฟังก์ชันส่วนประกอบ:

    <>
      <MainNavBar navigation={navigation} />
      <Routes>
        <Route index={true} element={<Home />} exact />
        <Route path="user" element={<User />} exact>
          <Route
            path=":name"
            render={
              ({ match: { params: { name } } }) => {
                console.log(name);
                console.log("test2");
                return (<UserPage
                  userName={name}
                />);
              }}
          />
        </Route>
        <Route path="*" element={<PageNotFound />} />
      </Routes>
    </>

นี่คือที่ของผู้ใช้ส่วนประกอบ;งเป็นคราวที่เยี่ยมสำหรับการดีบั๊กตู้เอทีเอ็มก่อน

const User = () => (
  <div>
    <header className="App-header">
      <Outlet />
    </header>
  </div>
);

ตอนที่ฉันไป http://localhost:3000/user/test มันวาง User ส่วนประกอบแต่ไม่ใช่ลูก(ที่ทางระบาย/UserPage ส่วนประกอบ)

ฉันพยายามหลายของ combinations แต่ดูเหมือนจะต้องทำอะไรบางอย่างผิดปกติดังนั้นช่วยจะเป็นเกียรติอย่างยิ่ง ขอบคุณ!

Question 2

ใน react-router-dom v6 ง Route ส่วนประกอบไม่มีอีกแล้ว render หรือ component บพวกอุปกรณ์ประกอบพวกเขาจัดการพาพวกเขาส่วนประกอบอยู่ element อุปกรณ์ ใช้ useParams ฮุคเพื่อเข้าใช้งานเส้นทางที่ตรงกับ params. ถ้า UserPage เป็นส่วนประกอบนั่น ไม่สามารถ ใช้ตอบโต้ hooks แล้วใช้ wrapper ฟังก์ชันส่วนประกอบจะเข้าถึงเส้นทางที่ตรงกับ param และผ่านมันเป็นอุปกรณ์

const UserPageWrapper = () => {
  const { name } = useParams();
  useEffect(() => {
    console.log({ name }); // <-- log param in effect
  }, [name]);
  return <UserPage userName={name} />;
};

...

<>
  <MainNavBar navigation={navigation} />
  <Routes>
    <Route index element={<Home />} />
    <Route path="user" element={<User />}>
      <Route path=":name" element={<UserPageWrapper />} />
    </Route>
    <Route path="*" element={<PageNotFound />} />
  </Routes>
</>

Drew Reese · Answer 1 · 2021-11-24T01:05:35

ใน react-router-dom v6 ง Route ส่วนประกอบไม่มีอีกแล้ว render หรือ component บพวกอุปกรณ์ประกอบพวกเขาจัดการพาพวกเขาส่วนประกอบอยู่ element อุปกรณ์ ใช้ useParams ฮุคเพื่อเข้าใช้งานเส้นทางที่ตรงกับ params. ถ้า UserPage เป็นส่วนประกอบนั่น ไม่สามารถ ใช้ตอบโต้ hooks แล้วใช้ wrapper ฟังก์ชันส่วนประกอบจะเข้าถึงเส้นทางที่ตรงกับ param และผ่านมันเป็นอุปกรณ์

const UserPageWrapper = () => {
  const { name } = useParams();
  useEffect(() => {
    console.log({ name }); // <-- log param in effect
  }, [name]);
  return <UserPage userName={name} />;
};

...

<>
  <MainNavBar navigation={navigation} />
  <Routes>
    <Route index element={<Home />} />
    <Route path="user" element={<User />}>
      <Route path=":name" element={<UserPageWrapper />} />
    </Route>
    <Route path="*" element={<PageNotFound />} />
  </Routes>
</>

ตอบโต้ Router v6 ไม่ได้ทำงานกับที่อยู่ URL Slugs

คำถาม

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

ในภาษาอื่นๆ

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

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

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