Skip to content

Commit

Permalink
Merge pull request #6385 from marmelab/doc-syncwithlocatoin-clarifica…
Browse files Browse the repository at this point in the history
…tions

[Doc] Fix misleading explanation of <List syncWithLocation> prop
  • Loading branch information
djhi authored Jun 23, 2021
2 parents 5328ae2 + 23d46c8 commit 93c3aea
Showing 1 changed file with 14 additions and 12 deletions.
26 changes: 14 additions & 12 deletions docs/List.md
Original file line number Diff line number Diff line change
Expand Up @@ -787,25 +787,27 @@ The default value for the `component` prop is `Card`.

### Synchronize With URL

When a List based component (eg: `PostList`) is passed to the `list` prop of a `<Resource>`, it will automatically synchronize its parameters with the browser URL (using react-router location). However, when used anywhere outside a `<Resource>`, it won't synchronize, which can be useful when you have multiple lists on a single page for example.
When a `<List>` based component (eg: `<PostList>`) is passed as a `<Resource list>`, react-admin synchronizes its parameters (sort, pagination, filters) with the query string in the URL (using `react-router` location). It does so by setting the `<List syncWithLocation>` prop by default.

In order to enable the synchronization with the URL, you can set the `syncWithLocation` prop. For example, adding a `List` to an `Edit` page:
When you use a `<List>` component anywhere else than as `<Resource list>`, `syncWithLocation` isn't enabled, and so `<List>` doesn't synchronize its parameters with the URL - the `<List>` parameters are kept in a local state, independent for each `<List>` instance. This allows to have multiple lists on a single page. The drawback is that a hit on the "back" button doesn't restore the previous list parameters.

You may, however, wish to enable `syncWithLocation` on a `<List>` component that is not a `<Resource list>`. For instance, you may want to display a `<List>` of Posts in a Dashboard, and allow users to use the "back" button to undo a sort, pagination, or filter change on that list. In such cases, set the `syncWithLocation` prop to `true`:

{% raw %}
```jsx
const TagsEdit = (props) => (
<>
<Edit {...props}>
// ...
</Edit>
const Dashboard = () => (
<div>
// ...
<ResourceContextProvider value="posts">
<List syncWithLocation basePath="/posts" filter={{ tags: [id]}}>
<Datagrid>
<TextField source="title" />
</Datagrid>
<List syncWithLocation basePath="/posts" >
<SimpleList
primaryText={record => record.title}
secondaryText={record => `${record.views} views`}
tertiaryText={record => new Date(record.published_at).toLocaleDateString()}
/>
</List>
</ResourceContextProvider>
</>
</div>
)
```
{% endraw %}
Expand Down

0 comments on commit 93c3aea

Please sign in to comment.