flat-fuchsia•8mo ago

History

Hello, I have a problem. When I use filters and sorting and pagination, they do not save new search history data, but simply overwrite the existing ones, I have syncWithLocation: true. That is, I was on a certain page, then went to a new one, applied certain filters, and when I go back to go back to the previous filters, it instead throws me back to the previous page that I originally came from. How to fix it?

7 Replies

kapa.ai•8mo ago

Hi @RomaY. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The syncWithLocation feature in Refine allows you to encode the state of your table or list (e.g., sort order, filters, pagination) in the query parameters of the URL. When the URL changes, the state is automatically updated to match. This feature is useful for sharing table or list states across different routes or pages, and for allowing users to bookmark or share links to specific table or list views. However, it does not support preserving the history of previous states. The behavior you're experiencing is expected when using syncWithLocation. When you navigate to a new page and apply certain filters, the URL is updated to reflect the current state. If you navigate back, it will take you to the previous URL, which represents the state of the previous page you were on. Unfortunately, based on the information provided in the extracts, there doesn't seem to be a built-in way in Refine to preserve the history of previous states when using syncWithLocation. You might need to implement a custom solution to achieve this. Here's how you can use the syncWithLocation property:

function App() {  
 return (  
 <ThemeProvider theme={LightTheme}>  
 <CssBaseline />  
 <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />  
 <RefineSnackbarProvider>  
 <Refine  
 ...  
 options={{   
 mutationMode: "undoable",   
 syncWithLocation: true   
 }}  
 />  
 </RefineSnackbarProvider>  
 </ThemeProvider>  
 );  
}  
  
export default App;

function App() {  
 return (  
 <ThemeProvider theme={LightTheme}>  
 <CssBaseline />  
 <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />  
 <RefineSnackbarProvider>  
 <Refine  
 ...  
 options={{   
 mutationMode: "undoable",   
 syncWithLocation: true   
 }}  
 />  
 </RefineSnackbarProvider>  
 </ThemeProvider>  
 );  
}  
  
export default App;

Please note that if syncWithLocation is enabled, on page refresh filter values will be of type string since they will be parsed from the URL. This might produce some incompatibility if data for the filter input comes from an API and it's not of type string (source (https://refine.dev/docs/api-reference/antd/components/filter-dropdown)). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@538717491908575242> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•8mo ago

It didn't help i.e. it only saves the last settings on the page and not the new ones. And during pagination, I go through the pages, but when I click back, it returns not the previous pagination page, but in general, the previous page, not the one where they can be applied @contributor

relaxed-coral•8mo ago

Hey @RomaY, currently sync with location feature sends replace calls to the router. This can be done via overriding the go method of the router provider. Like if the changes are only made to filters, sorters or pagination and the action is replace, do a push instead 🤔 Can you open a feature request to our GitHub repo? I think this will be a good addition to the sync with location feature

flat-fuchsia•8mo ago

But before it worked differently, before it did not overwrite, but made a new one. I used useTable and its filtering, pagination and sorting to record in the url, so do I need to redo everything?

relaxed-coral•8mo ago

When was the last time you've updated refine dependencies? Actually the sync with location feature been using replace from the beginning. I'm curious if there was a bug or something that made it work or looked like it worked that way 🤔 About the override, no you don't have to redo anything actually, routerProvider is detached from your code and binded to <Refine /> component. I recommend opening an issue (feature request) through github for this and let's make a plan for development and the release of this feature instead of going with the override option 🙏

flat-fuchsia•8mo ago

how to do it as i have never done it. In addition, earlier, when I was on the component where you can apply filters and pagination, every request was recorded in the history, and I could walk through it like this (on the same page but with different filters, but I think you understand what I mean ), and now just overwrites the current link. So what should I do, I'm about GitHub. Because for me I think to use useSearchParams() hook