我正在创建一个使用Nextjs的React应用程序。
我真的想对我的BO使用react-admin。我试过test example,和react配合使用,它工作得很好。不幸的是,虽然我试图在next 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
的教程
非常感谢
发布于 2021-02-12 14:21:23
这个管理组件只能在客户端工作,你需要把它全部包装到一个组件中,并使用动态导入来帮助你实现这一点
//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
https://stackoverflow.com/questions/65629726
复制相似问题