时间戳

首页 > 解决方案 > 如何连接到 React-admin 中的嵌套路径？（例如 http://my.api.to/users/active）

reactjs - 如何连接到 React-admin 中的嵌套路径？（例如 http://my.api.to/users/active）

问题描述

我有像http://my.api.to/user/active这样的 API 路径，其中 /user 是一个有效的 api 调用以及 /user/active。

我应该如何将它们添加到 <Resource name="" >，以便我的 dataProvider 接受它？

我使用默认的 ra-data-json-server 的 dataprovider 并进行了细微的更改。

我的 GET_LIST 看起来像这样：

        case GET_LIST: {
            const { page, perPage } = params.pagination;
            const { field, order } = params.sort;
            const query = {
                ...fetchUtils.flattenObject(params.filter),
                //filter: JSON.stringify(params.filter),
                sort: field,
                order: order,
                start: (page - 1) * perPage,
                end: page * perPage,
            };
                url = `${apiUrl}/${resource}?${stringify(query)}`;
            }
            break;
        }

我还尝试根据资源名称调整 url，但没有任何运气：

        case GET_LIST: {
            const { page, perPage } = params.pagination;
            const { field, order } = params.sort;
            const query = {
                ...fetchUtils.flattenObject(params.filter),
                //filter: JSON.stringify(params.filter),
                sort: field,
                order: order,
                start: (page - 1) * perPage,
                end: page * perPage,
            };
            if (resource === 'clicks/monthly'){
                url = `${apiUrl}/clicks/monthly?year=2019&${stringify(query)}`;
            } else {
                url = `${apiUrl}/${resource}?${stringify(query)}`;
            }
            break;
        }

你能帮忙吗？

标签： reactjsreact-admin

解决方案

例如，尝试不使用斜线命名您的资源users-active

  <Admin
        dataProvider={jsonServerProvider('http://my.api.to')}
        dashboard={Dashboard}
    >
         <Resource name="users" icon={UserIcon} list={UserList}  options={{ label: 'All users' }}/>
         <Resource name="users-active" icon={UserIcon} list={UserList} options={{ label: 'Active users' }}/>
    </Admin>

在您的数据提供者中，您将能够根据需要路由呼叫：

     case GET_LIST: {
        const { page, perPage } = params.pagination;
        const { field, order } = params.sort;
        const query = {
            ...fetchUtils.flattenObject(params.filter),
            //filter: JSON.stringify(params.filter),
            sort: field,
            order: order,
            start: (page - 1) * perPage,
            end: page * perPage,
        };
        if (resource === 'users-active'){
                url = `${apiUrl}/users/active?${stringify(query)}`;
            } else {
                url = `${apiUrl}/${resource}?${stringify(query)}`;
        }
        break;
    }

推荐阅读