Question About useParams Not Updating After window.history.pushState in Next.js 14.2.12

[JCs3lma]

Hi there! I’m a beginner working with Next.js 14.2.12, and I have a question regarding the useParams hook from next/navigation.

I’m trying to log the parameters obtained from useParams, but it doesn't seem to update when I change the URL using window.history.pushState(). Here’s a simplified version of my code:

import { useParams } from 'next/navigation';
import { useEffect } from 'react';

const MyComponent = () => {
  const params = useParams();

  useEffect(() => {
    console.log(['params', params]);
  }, [params]);

  const someButton = () => {
    // Code to change the URL
    const newStep = 2; // Example new step value
    const url = `/quotation/${newStep}`; // Example URL
    window.history.pushState({ step: newStep }, '', url);
  };

  return (
    <div>
      <button onClick={someButton}>Change Step</button>
    </div>
  );
};

export default MyComponent;

The Issue:
When I call window.history.pushState, the URL changes as expected, but the params from useParams do not reflect the updated URL. They remain unchanged, and the console log continues to show the previous state.

My Question:

1. Why does useParams not return the updated parameters after calling window.history.pushState?
2. Is there a better approach to ensure the parameters update correctly when navigating using the History API?

[suprunchuk]

The issue you're encountering is due to how the useParams hook from next/navigation works in Next.js. The useParams hook is designed to work with Next.js's built-in routing system, which relies on the framework's internal mechanisms to detect route changes. When you use the window.history.pushState() method, you're bypassing these mechanisms, so useParams doesn't detect the change.

Here's how you can address this issue:

Solution: Use Next.js Routing
Instead of using window.history.pushState(), you should use Next.js's built-in routing capabilities, such as the useRouter hook from next/router. This will ensure that your component re-renders with the updated parameters when the URL changes.

Here's how you can modify your component to use useRouter:

// pages/quotation/[step].js
import { useRouter } from 'next/router';
import { useEffect } from 'react';

const MyComponent = () => {
  const router = useRouter();
  const { step } = router.query;

  useEffect(() => {
    console.log(['params', step]);
  }, [step]);

  const someButton = () => {
    // Use Next.js router to change the URL
    const newStep = 2; // Example new step value
    router.push(`/quotation/${newStep}`);
  };

  return (
    <div>
      <button onClick={someButton}>Change Step</button>
    </div>
  );
};

export default MyComponent;

[JCs3lma]

Got it, Thanks 👍

[David05500]

Thank you for the detailed answer, the problem I see with the above is that we are forced to re-render the page, which is not the behaviour I needed for example. And the shallow: true doesn't work anymore.

So currently if you dont want to re-render the page on params update, youd need to go outside of Next to do it.

[ajaxpost]

enumm... 我不想再参数更新时重新渲染页面，应该如何操作，有什么比较好的解决办法吗，请教下。