How to navigate to a list page with a filter parameter?
I want to navigate to a list page by setting some filter parameter in the URL. How can I achieve that, I have asked the same question earlier as https://discord.com/channels/837692625737613362/1079657600532090992 but couldn't figure out how to do it.
For example, I have a list page of category and now I want to go to a list page of post with a filter of the same category. I have an action link in my category for a post list and when I click that link I should navigate to a list of post, but here in my filters that post should be filtered based on the category that I navigated to.
8 Replies
Hi @dipbazz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You can achieve this by using the
syncWithLocation
feature of refine. This feature allows you to sync the URL with the contents of a page, including filters, sort order, and pagination.
To use this feature, you need to set the syncWithLocation
option to true
in your Refine
component. Here is an example:
(Source: How to Build a React Admin Panel with Mantine and Strapi (https://refine.dev/blog/react-admin-panel/))
Once syncWithLocation
is enabled, you can manually modify the list of query parameters by editing directly in the URL. For example, if you want to filter posts by category, you can add a category
parameter to the URL like this:
(Source: Build internal tools using Low Code with refine, React-based framework (https://refine.dev/blog/build-internal-tools-using-low-code-with-refine/))
To navigate to a list page with a filter parameter, you can use the useNavigation
hook's list
method. This method allows you to navigate to a list page and pass filter parameters. Here is an example:
Please note that the above code is not directly extracted from the provided sources, but it's based on the principles explained in the sources. You may need to adjust the code according to your actual data structure and requirements.
For more information about syncWithLocation
and other refine features, you can check out the refine documentation (https://refine.dev/docs/core/components/refine-config).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@494653850632978472> kapa.ai is still learning and improving, please let us know how it did by reacting below
extended-salmon•13mo ago
@kapa.ai this is not working.
Let me check the knowledge base for you. One moment! :books:
----------------------
I'm sorry to hear that you're having trouble. Based on the information provided in the extracts, here's a more detailed approach:
1. First, ensure that the
syncWithLocation
option is set to true
in your Refine
component. This allows the URL to reflect the current state of your page, including filters, sort order, and pagination.
(Source: How to Build a React Admin Panel with Mantine and Strapi (https://refine.dev/blog/react-admin-panel/))
2. When you want to navigate to the list page of posts filtered by a specific category, you can use the useNavigation
hook's methods. However, the extracts do not provide a direct example of using useNavigation
to navigate with filters.
The useNavigation
hook provides methods like list
, create
, edit
, show
, clone
, push
, replace
, goBack
, listUrl
, and createUrl
for navigation. Each method accepts different parameters, and some of them accept a meta
parameter which could potentially be used to pass filter parameters.
However, the exact usage of these methods for your specific use case is not clear from the provided extracts.
(Source: useNavigation API Reference (https://refine.dev/docs/api-reference/core/hooks/navigation/useNavigation/))
3. Once syncWithLocation
is active, the URL on the listing page shows query parameters like those shown below:
Users can change the current page, items count per page, and sort and filter parameters.
(Source: Refine Config (https://refine.dev/docs/api-reference/core/components/refine-config/))
If the above steps do not work, it might be due to some other issues in your code or setup. I would recommend checking the official refine documentation or seeking help from the refine community for more specific guidance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@494653850632978472> kapa.ai is still learning and improving, please let us know how it did by reacting below
extended-salmon•13mo ago
I have implemented the solution by creating a new resource using the
identity
key to differentiate two url in Refine
and based on the params of the category I have set a filters in a useTable
hook. I am not sure if this is the way to do so. Let me know if anyone can suggest me a proper way to do it. For instance:
Now in my post page component's useTable
hook I set the filters based on the categoryId as
wise-white•13mo ago
Hello @dipbazz, I think your solution looks great, I think it's way to go.
extended-salmon•13mo ago
Thanks @batuhanw for your feedback. If this solutions looks good we may keep it in the documentation so that if someone require this they may use it, what do you think?