Image by DashaKudryavtseva

Use wouter to detect query param changes

Recently we had a requirement where we needed to synchronise UI state with url changes/updates. To be specific, we wanted to render section by passing it via query params

http://localhost:3000?section=categories // Renders categories componenthttp://localhost:3000?section=detail?name=jack // Renders detail component and name parameter has a value, 'jack'.

It is important to mention at this point that we were using wouter for routing for our preact SPA and redux for state management. Looking at out current tech preference, it was obvious we would consider connected-react-router and we did but not without taking one last look at wouterhooks based api.

If you like article above, give me a thumbs up. Thanks for reading.




TypeScript, GraphQL, React, Next.js

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

First-class and Higher Order Functions: Effective Functional JavaScript

Truthy and Falsy values //Checking truthy and falsy value

Use Task for Asynchronous Actions

MY #JavaScriptmas! 2021 solutions

String Reversal In Javascript

Dynamic imports, React and Redux

How To Add HTML Wrapper On Angular Component In Storybook

Build data source API Powered by CoinGecko & Telegram API

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


TypeScript, GraphQL, React, Next.js

More from Medium

Upgrading to React Router version 6

How to create fully customizable horizontal scrolling sections in Elementor

Kickstart Your Embedded Projects With ESP32 and PlatformIO

Best practices in Project Management