useParams do not update when there are no path params

[khavin]

Hello Everyone,
I ran into a small issue with the useParams() hook. I wanted to do the following in one of my projects.

1. /products/categories/:food -> Display Products component with food subsection
2. /products -> Display the Products component without any subsections

Both the routes are pointing to the same component. Here's the issue.
Step 1: I'm navigating to the 1st URL (/products/categories/apple). useParams hook returns the following object -> {"0":"apple","category":"apple"}.

Step 2: I am navigating to the 2nd URL (/products). Here useParams hook is pointing to the same object {"0":"apple","category":"apple"} and not {}.

I have created a codesandbox which illustrates this issue.

Codesandbox Link

There are three links. Click the links one by one and see how the params update. Let me know if this is the expected behavior.

[molefrog]

Closed via #479

[Kordonme]

@molefrog Could there be another related issue still not fixed here? I have updated the Codesandbox from @khavin with a page parameter for the sake of testing.

https://codesandbox.io/p/sandbox/quirky-breeze-forked-kyq79t

If you follow these steps:

1. Click Apple category (shows correct category in params)
2. Click Page 1 (shows correct category and page in params)
3. Click Page 2 (shows correct category and page in params)
4. Browser back (shows correct category and page in params)
5. Browser back (still shows page in params?)

Hopes this makes sense.

[Kordonme]

Would it make sense to check the array length of new params with the array length of cached params?

if (Object.keys(value).length !== Object.keys(curr).length) curr = value;