react-admin 与下一个 js

Posted 2023-02-22

【中文标题】react-admin 与下一个 js

【英文标题】：react-admin with next 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 的教程？

非常感谢

【参考方案1】：

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

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

const ReactAdmin = dynamic(() => import("components/admin/ReactAdmin"), 
  s-s-r: 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