Vue项目迁移React路由部分经验分享

export function RouteWithSubRoutes(route: RoutesItem) {
  return (
    <Route
      path={route.path}
      render={(props) => (
        <route.component {...props} routes={route.routes} />
      )}
    />
  )
}

export function RouteWithSubRoutes(route: RoutesItem) {
  return (
    <Route
      path={route.path}
      render={(props) => (
        <>
					{}
          <Helmet>
            <title>{route.title}</title>
          </Helmet>
          <route.component {...props} routes={route.routes} />
        </>
      )}
    />
  )
}

import { Routes, Route, Outlet } from "react-router-dom";
function App() {
  return (
    <Routes>
      <Route path="invoices" element={<Invoices />}>
        <Route path=":invoiceId" element={<Invoice />} />
        <Route path="sent" element={<SentInvoices />} />
      </Route>
    </Routes>
  );
}
function Invoices() {
  return (
    <div>
      <h1>Invoices</h1>
      <Outlet />
    </div>
  );
}
function Invoice() {
  let { invoiceId } = useParams();
  return <h1>Invoice {invoiceId}</h1>;
}
function SentInvoices() {
  return <h1>Sent Invoices</h1>;
}

let routeCreater
if (props.routerMode === RouterMode.History) {
  routeCreater = createBrowserRouter
} else {
  routeCreater = createHashRouter
}
const App = <RouterProvider router={routeCreater(routes, { basename })} />
ReactDom.render(App, document.querySelector('#app'))

const SignManagement = () => {
  return (
    <>
      <p>SignManagement</p>
      {}
      <Outlet />          
    </>
  )
}
const SignApply = () => {
  return <p>SignApply</p>
}
export const routes: RouteObject[] = [
  {
    // title: '签约管理',
    element: <SignManagement />,  // <---- component keyname变成了 element 
    path: '/guildSignConManage',
    errorElement: <p>error</p>,
    children: [
      {
        // title: '签约申请',
        element: <SignApply />,
        path: 'signApply'
      }
    ]
  }
]