created: 2021-11-12T08:22:03.000Z

react-admin で、react-admin の機能を使わないページを作りたいときの方法

react-admin で、完全にカスタマイズされたページを作りたいときの方法。

けっこういろいろ実装が必要になる方法しかなくて、マジかよとなるが、これは公式のドキュメントに書いてある方式で、GitHubのissueなどもこのやり方に沿ってやりとりされている。

ルーティング

まず、ルーティングを定義する

  • customRoutes を定義して、Admin タグの引数に渡す
  • リクエストできるパスと、そのパスで表示されるコンポーネントを追加
import * as React from "react";
import { Route } from 'react-router-dom';
import {SampleQueryInput} from './Sample'

export default [
  <Route exact path="/sample" component={SampleQueryInput} />,
];
const App = () => (
-   <Admin dataProvider={dataProvider}>
+   <Admin customRoutes={customRoutes} dataProvider={dataProvider}>

つくったルーティングへのリンク(Menu)

これだけだと、できたページへのリンクがないので、つぎに、そのルーティングへのリンクを、サイドバー( Menu と呼ばれる)に追加する。

import * as React from 'react';
import { useSelector } from 'react-redux';
import { Menu, MenuItemLink, getResources } from 'react-admin';
import DefaultIcon from '@material-ui/icons/ViewList';

export const CustomMenu = (props: any) => {
    const resources = useSelector(getResources);
    return (
        <Menu {...props}>
            {resources.map(resource => (
                <ItemLinkFromResource key={resource.name} resource={resource} />
            ))}
            <MenuItemLink
                key='sample'
                to="/sample"
                primaryText="sample"
                leftIcon={<DefaultIcon />}
            />
        </Menu>
    );
};

const ItemLinkFromResource = ({ resource }: any) => (
    <MenuItemLink
        to={`/${resource.name}`}
        primaryText={
            (resource.options && resource.options.label) ||
            resource.name
        }
        leftIcon={
            resource.icon ? <resource.icon /> : <DefaultIcon />
        }
    />
);

つくった Menu を Admin コンポーネントに渡す

  • できた CustomMenu コンポーネントを、
  • CustomLayout コンポーネントに渡し、
  • Layout コンポーネントを Admin に渡す。
import { Layout } from 'react-admin';
import { CustomMenu } from './Menu';

const CustomLayout = (props: any) => <Layout {...props} menu={CustomMenu} />;
export default CustomLayout;

- <Admin customRoutes={customRoutes} dataProvider={dataProvider}>
+ <Admin customRoutes={customRoutes} layout={layout} dataProvider={dataProvider}>

参考