ตอบโต้-router-dom 6 อัพเกรดช่วย:ขวาทั้งหมดส่วนประกอบของเด็กที่<เส้นทาง>ต้องเป็น<เส้นทาง>หรือ<มีปฏิกิริยาอะไรเศษชิ้นส่วน>

Question 1

ของโปรแกรมปรับปรุงเมื่อเร็วๆนี้เพื่อคนรุ่นเบต้าของโต้ตอบ-router-dom,และทุกอย่างไม่เป็นไรหรอก จากนั้นเมื่อฉันพยายามที่จะปรับปรุงให้ 6.0.2 ฉันได้เยอะแยะ invariant เกิดข้อผิดพลาดเรื่อง All component children of <Routes> must be a <Route> or <React.Fragment>. นี่เป็นเพราะพวกเราต้องของเส้นทางกำหนดไว้ตาม:

คุณสมบัติ.jsx:

export const FeatureRoutes = () => (
  <Routes>
    <Route path="/" element={<Feature1 />} />
    <Route path="/*" element={<NotFound />} />
  </Routes>
);

เส้นทาง.jsx:

export const routes = [
  {
    path: "feature",
    component: FeatureRoutes,
  },
  /* lots of other routes, defined the same way: <Route> wrapped in a component */
];

แอพjsx:

<Routes>
  {routes.map((route) => (
    <Route key={route.path} path={`${pathPrefix}/${route.path}/*`}>
      <route.component />
    </Route>
  ))}
</Routes>

ตอนนี้ส่งผลให้เกิดข้อผิดพลาดอยู่เหนือเพราะตนภายในเส้นทางสำรอง(ตัวอย่างเช่น FeatureRoutes)เป็นห่ออยู่ในงานส่วนประกอบ. ฉันพยายามกลับมาสอบรยึดตามตัวอักษรแบบนั้ JSX แต่แล้วก็อีกข้อผิดพลาด ฉันไม่แน่ใจว่าวิธีที่จะแก้ไขเรื่องนี้คือคำตอบเดียวกัเลยเขียนใหม่ที่เรากำหนดเส้นทางของเรา? เรายังต้องมีเส้นทางนั้นจะถูกจัดเก็บไว้ในกลับมา-จบแล้วแผนที่จะกำหนดเองส่วนประกอบ-อีกครั้งฉันไม่แน่ใจว่าฉันจะห่อพวกนี้ตอนนี้ฉันไม่ได้รับอนุญาตให้มีส่วนประกอบระหว่างเส้นทางและเส้นทางได้

มีคำแนะนำอะไรไหมเกียรติอย่างยิ่ง

Question 2

ฉันเชื่อว่าเล็กน้อ refactor จะเอาของโปรแกรแสดงผลอีกครั้ง

ใน routes อาเรย์เปลี่ยนชื่อ component ต้อง Component ดังนั้นมันจะเป็นค่าการแสดงผลเป็นตอบโต้ส่วนประกอบ,i.e. ที่เหมาะสมที่ชื่อมีปฏิกิริยายส่วนประกอบ(PascalCased).

const routes = [
  {
    path: "feature",
    Component: FeatureRoutes
  }
  /* lots of other routes, defined the same way: <Route> wrapped in a component */
];

ตอนที่วางแผน routes จัดการพาคน Component ออกไป Route ส่วนประกอบเป็น element อุปกรณ์ประกอบที่ เป็น JSX.

<Routes>
  {routes.map(({ path, Component }) => (
    <Route
      key={path}
      path={`${pathPrefix}/${path}/*`}
      element={<Component />}
    />
  ))}
</Routes>

Drew Reese · Answer 1 · 2021-11-23T16:27:48

ฉันเชื่อว่าเล็กน้อ refactor จะเอาของโปรแกรแสดงผลอีกครั้ง

ใน routes อาเรย์เปลี่ยนชื่อ component ต้อง Component ดังนั้นมันจะเป็นค่าการแสดงผลเป็นตอบโต้ส่วนประกอบ,i.e. ที่เหมาะสมที่ชื่อมีปฏิกิริยายส่วนประกอบ(PascalCased).

const routes = [
  {
    path: "feature",
    Component: FeatureRoutes
  }
  /* lots of other routes, defined the same way: <Route> wrapped in a component */
];

ตอนที่วางแผน routes จัดการพาคน Component ออกไป Route ส่วนประกอบเป็น element อุปกรณ์ประกอบที่ เป็น JSX.

<Routes>
  {routes.map(({ path, Component }) => (
    <Route
      key={path}
      path={`${pathPrefix}/${path}/*`}
      element={<Component />}
    />
  ))}
</Routes>

คำถาม

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

ในภาษาอื่นๆ

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

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

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