[Doc] Fix nested routes explanation and add more examples

[fzaninotto]

React-admin doesn't support nested resources, but you can use the <Resource children> prop to render a custom component for a given sub-route. For instance, to display a list of posts for a given user:

import { Admin, Resource } from 'react-admin';
import { Route } from 'react-router-dom';

export const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="users" list={UserList} edit={UserDetail}>
            <Route path=":id/posts" element={<PostList />} />
            <Route path=":id/posts/:postId" element={<PostDetail />} />
        </Resource>
    </Admin>
);

This setup creates four routes:

• /users renders the <UserList> element
• /users/:id renders the <UserDetail> element
• /users/:id/posts renders the <PostList> element
• /users/:id/posts/:postId renders the <PostDetail> element

In order to display a list of posts for the selected user, <PostList> should filter the posts by the id parameter. To do so, use the useParams hook from react-router-dom:

// in src/PostList.jsx
import { List, Datagrid, TextField } from 'react-admin';
import { useParams } from 'react-router-dom';

export const PostList = () => {
    const { id } = useParams();
    return (
        <List resource="posts" filter={{ userId: id }}>
            <Datagrid rowClick="edit">
                <TextField source="id" />
                <TextField source="title" />
                <TextField source="year" />
            </Datagrid>
        </List>
    );
};

In the <PostDetail> component, you must also use the useParams hook to get the postId parameter and display the post with the corresponding id:

// in src/PostDetail.jsx
import { Edit, SimpleForm, TextInput } from 'react-admin';
import { useParams } from 'react-router-dom';

export const PostDetail = () => {
    const { postId } = useParams();
    return (
        <Edit resource="posts" id={postId}>
            <SimpleForm>
                <TextInput source="id" />
                <TextInput source="title" />
                <TextInput source="year" />
            </SimpleForm>
        </Edit>
    );
};

[mat-twg]

bulkActionButtons are not working with posts..

[djhi]

bulkActionButtons are not working with posts..

If you found an issue, please create a new github issue and follow its template.