Question

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

属性 'noLayout' 不存在于类型 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly & OmitNative<.. .>> & Readonly<...>'.

我意识到我正在使用 react-router-dom 中的 Route 组件来实现 RouterProps，并且属性 noLayout 在 CustomRoute 中声明（扩展 RouterProps）。管理员的 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>
  )
}

React-admin 自定义路由：类型 Route

1 个答案: