Next.js router not working properly when using dynamic routes and query params

Question

Router not working properly client side when using dynamic routes and query params. I have the following structure in pages:

videos.js
photos.js
[...userParams].js
...

I am trying to change path by using Router.push("/videos?sort=5&page=2", "/videos/recommended?page=2"). I'm trying to navigate to videos page, but for CEO purposes I need to transform some params into url subpath. For href I pass /videos followed by params, for as I put the url string I need. It was working well before I add [...userParams].js, but now Router doesn't get href properly. When Router pushes, it goes to [...userParams].js instead of videos.js. May be I'm doing something wrong? May be there is some bug?

Answer 1

This is because [...userParams].js will catch all the url after parent directory. For example if the directory structure is

post/
    videos.js
    photos.js
    [...userParams].js
    index.js

then the href or router.push for post/any-url-comes-here will be pointing to [...userParams].js file.

to make videos.js and photos.js work you need to modify directory structure like below

    post/
        videos/
              index.js
        photos/
              index.js
        [...userParams].js
        index.js