Should Next.js 14.1's window.history.pushState work the same way as router.push?
Unanswered
Bighead carp posted this in #help-forum
Bighead carpOP
I'm trying to use the new Next.js 14.1's window.history.pushState, but my components aren't re-rendering.
Working:
Not working:
Working:
const navigateToJob = () => {
// This is working
const params = new URLSearchParams(searchParams.toString());
params.set("jid", props.job.id);
router.push(`?${params.toString()}`);
};Not working:
const navigateToJob = () => {
// This is NOT working
const params = new URLSearchParams(searchParams.toString());
params.set("jid", props.job.id);
window.history.pushState(null, "", `?${params.toString()}`);
};9 Replies
Bighead carpOP
This video shows how the route is changing, but the data isn't re-rendering
I think you need to enable this, otherwise it just changing the url (shallow update)
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
experimental: {
windowHistorySupport: true,
},
}
module.exports = nextConfig@Bighead carp I'm trying to use the new Next.js 14.1's window.history.pushState, but my components aren't re-rendering.
Working:
ts
const navigateToJob = () => {
// This is working
const params = new URLSearchParams(searchParams.toString());
params.set("jid", props.job.id);
router.push(`?${params.toString()}`);
};
Not working:
ts
const navigateToJob = () => {
// This is NOT working
const params = new URLSearchParams(searchParams.toString());
params.set("jid", props.job.id);
window.history.pushState(null, "", `?${params.toString()}`);
};
if you use window.history.pushState, pretty sure it doesn't rerun the server component so to listen to updates you have to use
useSearchParams@Bighead carp Click to see attachment
yeah, I just tried enable it but got same error
Bighead carpOP
Going to try in a fresh repo, then going to make github issue ðŸ‘