如何解决React-admin 自定义路由:类型 Route
我正在尝试制作一个忘记密码的页面,该页面需要在没有布局的情况下呈现。我正在遵循文档、管理页面、customroutes 部分中的示例并将其调整为 Typescript。如果没有 noLayout 属性,路由正在渲染,但在布局内。路由添加noLayout时出现问题:
属性 'noLayout' 不存在于类型 'IntrinsicAttributes & IntrinsicclassAttributes
我意识到我正在使用 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>
)
}
解决方法
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>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。