react-admin with next js
react-admin with next js
提问于 2021-01-08 21:16:56
我正在创建一个使用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的教程
非常感谢
回答 1
Stack Overflow用户
发布于 2021-02-12 22: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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65629726
复制相关文章
相似问题
腾讯云开发者
