reactjs - การเพิ่มเส้นทางแบบไดนามิกทำให้เกิดข้อผิดพลาดกับ typescript

ฉันได้รับข้อผิดพลาดดังต่อไปนี้เมื่อพยายามโหลด route แบบไดนามิก

  return (
TS2739: Type '{ children: Element[]; }' is missing the following properties from type 'RouterProps': location, navigator
     8 |     <BrowserRouter>
  >  9 |       <Router>
       |        ^^^^^^
    10 |         {allModules.map((m: ModuleProps) => {
    11 |           return <Route path={m.routeProps.path} element={m.routeProps.element} key={m.name} />;
    12 |         })}

ประเภทพร็อพ:

export interface ModuleProps {
  name: string;
  routeProps: { path: string; element: React.ReactElement };
}

หน้า :

import { FC } from 'react';

const Login: FC = () => {
  return <div>Login</div>;
};

export default {
  name: 'Login',
  routeProps: { path: '/login', element: <Login /> },
};

โมดูล :

import LoginModule from './login';

export default [LoginModule];

แอป :

import { ModuleProps } from '@stonehenge-props/api-interfaces';
import { FC } from 'react';
import { BrowserRouter, Route, Router, RouterProps } from 'react-router-dom';
import allModules from './modules';

export const App: FC<RouterProps> = () => {
  return (
    <BrowserRouter>
      <Router>
        {allModules.map((m: ModuleProps) => {
          return <Route path={m.routeProps.path} element={m.routeProps.element} key={m.name} />;
        })}
      </Router>
    </BrowserRouter>
  );
};

export default App;

ดัชนี :

import { StrictMode } from 'react';
import * as ReactDOMClient from 'react-dom/client';

import App from './app/app';

const root = ReactDOMClient.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

คำตอบ #1

คอมโพเนนต์ Router ระดับต่ำมี props บางตัวที่ไม่สามารถละเว้นได้ซึ่งจำเป็นต้องส่งเข้าไป แต่คุณน่าจะต้องการนำเข้าและเรนเดอร์ Routes แทนการใช้คอมโพเนนต์ Router อีกตัว

นอกจากนี้ เนื่องจาก App ไม่ได้ใช้ props ใด ๆ จึงไม่จำเป็นต้องประกาศ props เหล่านั้นใน typing ของฟังก์ชัน ลบ RouterProps ออกจากการประกาศ ใช้ const App: React.FC<{}> =() => {} หรือเพียงแค่ const App =() => {}

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import allModules from './modules';

export const App: FC<{}> = () => {
  return (
    <BrowserRouter>
      <Routes>
        {allModules.map((m: ModuleProps) => {
          return (
            <Route
              path={m.routeProps.path}
              element={m.routeProps.element}
              key={m.name}
            />
          );
        })}
      </Routes>
    </BrowserRouter>
  );
};