react-admin 与下一个 js答案

【问题标题】：react-admin with next jsreact-admin 与下一个 js
【发布时间】：2021-04-14 04:53:30
【问题描述】：

我正在使用 Nextjs 使用 React 创建一个应用程序。

我想真正为我的 BO 使用 react-admin。我试过test example 并做出反应，效果很好。不幸的是，当我尝试在下一个 js 中包含一些代码时，它不起作用。

我创建了/admin/dashboard.tsx 文件，并添加了下一个代码（之前我自己测试过 - 工作代码）：

import * as React from 'react';
import PostIcon from '@material-ui/icons/Book';
import UserIcon from '@material-ui/icons/Group';
import { Admin, Resource, ListGuesser } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

import { PostList, PostEdit, PostCreate, PostShow } from './react-admin/posts';
import { UserList } from './react-admin/users';
import Dashboard from './react-admin/Dashboard';
import authProvider from './react-admin/AuthProvider';

const App = () => (
    <Admin
        dataProvider={jsonServerProvider(
            'https://jsonplaceholder.typicode.com'
        )}
        authProvider={authProvider}
        dashboard={Dashboard}
    >
        <Resource
            name="posts"
            icon={PostIcon}
            list={PostList}
            edit={PostEdit}
            create={PostCreate}
            show={PostShow}
        />
        <Resource name="users" icon={UserIcon} list={UserList} />
        <Resource name="comments" list={ListGuesser} />
    </Admin>
);
export default App;

我有下一个错误（渲染上下文）： rendering issue

也许有人可以向我推荐一些关于react-admin 和Next.Js 的教程？

非常感谢

【问题讨论】：

标签： next.js react-admin

【解决方案1】：

此管理组件仅在客户端工作，您需要将所有组件包装到一个组件中并使用动态导入来帮助您实现这一目标

//pages/index.tsx
import dynamic from "next/dynamic"

const ReactAdmin = dynamic(() => import("components/admin/ReactAdmin"), {
  ssr: false,
})

const HomePage = () => <ReactAdmin />

export default HomePage

以及组件本身

//components/admin/ReactAdmin.tsx

import { Admin } from "react-admin"
import jsonServerProvider from "ra-data-json-server"

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com")

const ReactAdmin = () => {
  return <Admin dataProvider={dataProvider} />
}

export default ReactAdmin

【讨论】：