前端项目实战叁拾捌-​react-admin+material ui-多表测试基本结构-第贰层

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣 带你加入前端巅峰人才交流群 

第二层

  <Admin
            dataProvider={dataProvider}
            basename= '/mydemo'
            layout={appLayout}
        >
            <Resource name = 't_prod_style' list = 
{DemoList} edit = {DemoEdit} hasEdit/>
            <CustomRoutes>
                <Route path = "myFirstPage/:mycode" 
element = {<MyFirstPage/>}/>
            </CustomRoutes>

        </Admin>

 MyFirstPage

import { Datagrid, List, ReferenceManyCount, TextField } from "react-admin"
import { useParams } from "react-router-dom";

const MyFirstPage = () => {
    const {mycode} = useParams();
    console.log('code is: ', mycode);
    
    return(
        <List resource="t_prod_category" filter={{code: mycode}}>
            <Datagrid>
                <TextField source = 'id' />
                <TextField source = 'code' />
                <ReferenceManyCount
                    label = "style"
                    reference="t_prod_style"
                    target = 'category_id'
                    link 
                />
            </Datagrid>
        </List>
    )
}

export default MyFirstPage;

 运行结果