How can I append SearchParams query to non-client generated URL?
Answered
Tomistoma posted this in #help-forum
TomistomaOP
Hello everyone!
I have a site, for example: https://www.example.com/
It has a products page for example: https://www.example.com/products
The products page has a tab filter that looks like this in the hero section that differentiates categories:
[All Products | Category A | Category B]
Scenarios that work properly at the moment:
1. When a user clicks a category after the route renders, it automatically appends the query to the URI and then displays data accordingly.
----- For example: User clicks on Category B in the tab filter after the page loads and the URI changes from https://www.example.com/products to https://www.example.com/products?category=b
2. I showcase the product categories as cards on the homepage. When a user clicks a link or button on the homepage, it automatically appends the query to the URI and then displays data accordingly.
----- For example: User clicks on the card button for Category B and is redirected from https://www.example.com/ to https://www.example.com/products?category=b
Here is the scenario that isn't working correctly:
User manually enters https://www.example.com/products into his browser meaning no category query is applied as the page loads. When the page loads, there is no data displayed because no category is selected and the tab filter component is rendered without any tab having an active UI state.
What I need help with:
I'd like to understand how I can automatically apply option A which is "All Products" to the URI if the page is loaded without any category query defined?
Additional info:
I'd like to avoid setting "All Products" as default tab in state and attempt to handle it as described above.
If someone here can help me out and share some advice on how I would be able to achieve such a behavior will be much appreciated and big thanks in advance!
I have a site, for example: https://www.example.com/
It has a products page for example: https://www.example.com/products
The products page has a tab filter that looks like this in the hero section that differentiates categories:
[All Products | Category A | Category B]
Scenarios that work properly at the moment:
1. When a user clicks a category after the route renders, it automatically appends the query to the URI and then displays data accordingly.
----- For example: User clicks on Category B in the tab filter after the page loads and the URI changes from https://www.example.com/products to https://www.example.com/products?category=b
2. I showcase the product categories as cards on the homepage. When a user clicks a link or button on the homepage, it automatically appends the query to the URI and then displays data accordingly.
----- For example: User clicks on the card button for Category B and is redirected from https://www.example.com/ to https://www.example.com/products?category=b
Here is the scenario that isn't working correctly:
User manually enters https://www.example.com/products into his browser meaning no category query is applied as the page loads. When the page loads, there is no data displayed because no category is selected and the tab filter component is rendered without any tab having an active UI state.
What I need help with:
I'd like to understand how I can automatically apply option A which is "All Products" to the URI if the page is loaded without any category query defined?
Additional info:
I'd like to avoid setting "All Products" as default tab in state and attempt to handle it as described above.
If someone here can help me out and share some advice on how I would be able to achieve such a behavior will be much appreciated and big thanks in advance!
Answered by Tomistoma
I just realized there is a useRouter from next/navigation
changed my code to
and now have resolved my issue.
changed my code to
useEffect(() => {
if (!search) {
setSearching('all')
router.replace('https://products,com/products?category=all')
}
}, [search, router])and now have resolved my issue.
3 Replies
TomistomaOP
I added in the following code:
This shows me the correct query in console but doesn't set the query to the url.
Changing to params.append also shows me the correct query in console but doesn't append the query to the url.
useEffect(() => {
if (!search) {
const params = new URLSearchParams(router.toString())
setSearching('all')
params.set('category', 'all')
console.log(params.toString())
}
}, [search, router])This shows me the correct query in console but doesn't set the query to the url.
Changing to params.append also shows me the correct query in console but doesn't append the query to the url.
TomistomaOP
Adding this works
but this is not the workaround I'd like to use because it refreshes the page.
window.location.assign('http://example.com/products?category=all')but this is not the workaround I'd like to use because it refreshes the page.
TomistomaOP
I just realized there is a useRouter from next/navigation
changed my code to
and now have resolved my issue.
changed my code to
useEffect(() => {
if (!search) {
setSearching('all')
router.replace('https://products,com/products?category=all')
}
}, [search, router])and now have resolved my issue.
Answer