I want to select filters and until I click on save filter, the product screen should not be visible. I am using useNextRouting also.
Hello @Deshant_Pandit,
Thank you for reaching out to us. Are you using Search UI? And which browser are you using?
@Samiul_Monir Yes I am using search UI and the browser is chrome
Thank you for letting us know.
Have you tried one of the codesandbox examples (https://kdyms.csb.app/) to see if its a problem with our code or your setup?
If i use useNextRouting issue occurs i.e, const combinedConfig = useNextRouting(queryConfig( queryFunc), history.pathname, queryFunc);
if i don't use it const combinedConfig = (queryConfig( queryFunc));
it works fine.
//useNextRouting file
import { useRouter } from "next/router";
import { useEffect, useMemo, useState } from "react";
export const useNextRouting = (config, basePathUrl, query) => {
const router = useRouter();
const { asPath } = router;
const getSearchParamsFromUrl = (url) => {
return url.match(/\?(.+)/)?.[1] || "";
};
const routingOptions = {
// read and write only the query string to search UI
// as we are leveraging existing stateToUrl and urlToState functions
// which are based on the query string
readUrl: () => {
return getSearchParamsFromUrl(asPath);
},
writeUrl: (url, { replaceUrl }) => {
const method = router[replaceUrl ? "replace" : "push"];
const params = Object.fromEntries(new URLSearchParams(url).entries());
if(replaceUrl){
method({ query: { ...router.query, ...params } }, undefined, {
shallow: true
});
}
else{
const isDynamicRoute = router.pathname.split('/').filter(val => {if(val.startsWith('[')) return val}).length > 0 ? true : false;
if(isDynamicRoute){
method({ query: { ...router.query, ...params } }, undefined, {
shallow: true
});
}
else{
method({ query: { ...params } }, undefined, {
shallow: true
});
}
}
},
routeChangeHandler: (callback) => {
const handler = (fullUrl) => {
if (fullUrl.includes(basePathUrl)) {
callback(getSearchParamsFromUrl(fullUrl));
}
};
router.events.on("routeChangeComplete", handler);
return () => {
router.events.off("routeChangeComplete", handler);
};
}
};
return useMemo(() => {
return {
...config,
routingOptions
};
}, [router.isReady, query]);
};
@Samiul_Monir if you have codesandbox example using useNextRouting. Please provide
Please be patient in waiting for responses to your question and refrain from pinging multiple times asking for a response or opening multiple topics for the same question. This is a community forum, it may take time for someone to reply to your question. For more information please refer to the Community Code of Conduct specifically the section "Be patient". Also, please refrain from pinging folks directly, this is a forum and anyone that participates might be able to assist you.
If you are in need of a service with an SLA that covers response times for questions then you may want to consider talking to us about a subscription.
It's fine to answer on your own thread after 2 or 3 days (not including weekends) if you don't have an answer.
1 Like
If I am using useNextRouting(uNR) config is called whenever i click on filter or deos anything However when we don't use uNR config is not called again and again. uNR is used for dynamic routing. Can we stop this behaviour Thanks
I have added documentation for NextJS. NextJS Integration | Documentation.
We are currently in the process of updating our documentation to cover NextJS version 14 as well.
1 Like
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.