如何正确使用带有 typescript 的 React router v6.4？

Question

我正在尝试在我的项目中使用 react-router-dom v6.4+。 我将其实现为对象的路由数组。 它作为路由工作，但突然间我遇到了另一个问题。 我无法调用位于路由数组中element属性上的组件内的任何挂钩。
在route.ts文件中：

import MainLayout from './container/layouts/mainLayout/MainLayout'
import ErrorPage from './view/Error'
import Home from './view/Home'

const routes: RouteObject[] = [
  {
    path: '/',
    element: MainLayout(),
    children: [
      {
        index: true,
        element: Home(),
      },
    ],
  },
  {
    path: '*',
    element: ChangeRoute('/404'),
  },
  {
    path: '/404',
    element: ErrorPage(),
  },
]

const router = createBrowserRouter(routes)

export default router

在app.ts文件中：

<RouterProvider router={router} fallbackElement={<React.Fragment>Loading ...</React.Fragment>} />

但是如果我尝试在MainLayout组件中使用任何钩子，它会说

MainLayout组件中的代码：

const MainLayout = () => {
  const [collapsed, setCollapsed] = useState(false)

  return (
    <Layout className='layout'>
      <SideBar collapsed={collapsed} />
      <Layout>
        <Topbar collapsed={collapsed} setCollapsed={setCollapsed} />
        <Outlet />
      </Layout>
    </Layout>
  )
}

export default MainLayout

我想如果我使用element: <MainLayout/>而不是element: MainLayout() ，那么这个问题就会解决。 但是 typescript 不允许我这样做。 在文档中，每件事都是简单的 javascript。只有一种类型定义是这样的

如何解决这个问题？ 请指导我。

编辑这里是 codesandbox 演示： 访问沙箱

Answer 1

element prop 需要一个React.ReactNode ，你直接调用 React function 而不是将它作为 JSX 传递。

例子：

const routes: RouteObject[] = [
  {
    path: '/',
    element: <MainLayout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
    ],
  },
  {
    path: '*',
    element: <ChangeRoute redirect='/404' />,
  },
  {
    path: '/404',
    element: <ErrorPage />,
  },
]

Answer 2

将route.ts文件的名称更改为route.tsx ，现在您可以在element object 属性中设置组件，这对我有用。