React-admin 自定义路由：Route 类型上不存在属性 noLayout

Question

我正在尝试制作一个忘记密码的页面，该页面需要在没有布局的情况下呈现。我正在关注文档、管理页面、customRoutes 部分中的示例并将其调整为 Typescript。如果没有 noLayout 属性，则路由正在渲染，但在布局内。给路由添加noLayout时出现问题：

“IntrinsicAttributes & IntrinsicClassAttributes> & Readonly & OmitNative<.. .>> & 只读<...>'.

我意识到我正在使用来自 react-router-dom 的实现 RouterProps 的 Route 组件，并且在 CustomRoute（扩展 RouterProps）中声明了属性 noLayout。管理员的 customRoutes 属性正在等待实现 CustomRoutes 接口的数组，但我提供了一组路由（就像在文档中一样）

有人知道怎么解决吗？

这是我的 App.tsx：

import React from 'react'
import { Admin, Resource } from 'react-admin'
import { Route } from 'react-router-dom'
import portugueseMessages from '@henriko/ra-language-portuguese'
import polyglotI18nProvider from 'ra-i18n-polyglot'

import dataProvider from './providers/dataProvider'
import authProvider from './providers/authProvider'
import Layout from './layout/Layout'
import Login from './pages/Login'
import Dashboard from './pages/Dashboard'
import ForgotPassword from './pages/ForgotPassword'

const App: React.FC = () => {
  const i18nProvider = polyglotI18nProvider(() => portugueseMessages, 'pt')

  return (
    <Admin
      dataProvider={dataProvider}
      authProvider={authProvider}
      i18nProvider={i18nProvider}
      layout={Layout}
      loginPage={Login}
      customRoutes={[
        <Route
          key="forgot-password"
          path="/forgot-password"
          component={ForgotPassword}
          exact
          noLayout
        />
      ]}
    >
      <Resource {...Dashboard} />
    </Admin>
  )
}

Answer 1

React-admin 公开了一个 CustomRoute 类型，您可以在这种情况下使用它：

import { CustomRoute } from 'react-admin';

const App: React.FC = () => {
  const i18nProvider = polyglotI18nProvider(() => portugueseMessages, 'pt')

  return (
    <Admin
      dataProvider={dataProvider}
      authProvider={authProvider}
      i18nProvider={i18nProvider}
      layout={Layout}
      loginPage={Login}
      customRoutes={[
-       <Route
+       <Route<CustomRoute>
          key="forgot-password"
          path="/forgot-password"
          component={ForgotPassword}
          exact
          noLayout
        />
      ]}
    >
      <Resource {...Dashboard} />
    </Admin>
  )
}