[Go Make Things] Shifting focus on route change with React Router

By rahmat hidayat

Friday, May 2, 2025

​ Today's newsletter is sponsored by ConfigCat — the feature flag service that helps you release features faster and with less risk. More on them at the end of today's newsletter. One of the big things SPAs often mess up is focus management. When a user moves from one page to the next on a classic server-rendered app or website, focus automatically shifts to the top of the document and the new page title is announced to screen readers. SPA routers often break this, leaving visually impaired and keyboard users "stranded" in the middle of a page. I recently worked on a project with React Router, which I thought handled this automatically, but for some reason was not in my app (not sure if it was a config issue or the behavior changed when they merged with Remix). (Yes, this is a React tutorial. Hell has frozen over!) There are a lot of ways to handle this, but in user testing, Marcy Sutton found that the generally most well received approach was the shift focus to the h1 heading on each route change. This both puts the user back at the top of the page and announces the page title (assuming the h1 is useful) to screen readers. I wrote a small little custom React hook for automating this in React Router. import { useEffect } from 'react'; import { useLocation } from 'react-router'; /** * Shifts focus to heading on route changes * ReactRouter historically did this automatically, but seems to no longer do so * @link https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/ */ export function useFocusOnLocationChange () { const location = useLocation(); useEffect(() => { const h1 = document.querySelector('h1'); const tabIndex = h1?.getAttribute('tabindex'); h1?.setAttribute('tabindex', tabIndex ?? '-1'); h1?.focus(); }, [location]); } Inside whatever Component generates your page or app layout, run it to automatically handle focus shifts. useFocusOnLocationChange(); I also added a little CSS to only show a focus ring around the heading for users who navigate by keyboard (or for whom the browser otherwise decides would benefit from it). /** * Only style programmatically focused elements if needed * @link https://code.google.com/p/chromium/issues/detail?id=37721 */ [tabindex="-1"]:focus { outline: none; } [tabindex="-1"]:focus-visible { outline: 2px solid var(--color-focus); } I was skeptical about the :focus-visible pseudo-class, but it can be pretty damn useful! Are you looking for a service to support dynamic feature flags? ConfigCat is a cross-platform LaunchDarkly alternative that's easy to learn and quick to set up. With SDKs for 19 platforms — including JavaScript, Python, Ruby, Java, and even Rust — you can toggle features on or off without redeploying. ConfigCat subscriptions are the same price regardless of your team size. Get 25% off any paid plan with code GO25 or just use ConfigCat's generous free tier. Definitely worth checking out. Cheers, Chris ​ Want to share this with others or read it later? View it in a browser.​ ​

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Share :

Facebook Twitter Google+ Lintasme