How to use shallow routing?

[omar-dulaimi]

Using withRouter as a wrapper, shallow routing doesn't seem to be working.

I currently use this method to change the route:

    this.props.router.push({
        pathname: currentPath,
        query: currentQuery,
    });

And couldn't figure where to put the shallow flag. So I switched to the method mentioned in the docs:
this.props.router.push('/post/[pid]?hello=123', '/post/abc?hello=123', { shallow: true })
So I did that manually, but I started getting 404s.

http://localhost:3000/_next/static/development/pages/search/%5Btype%5D/%5Bcat%5D/%5Barea%5D.js net::ERR_ABORTED 404 (Not Found)

decoded:
"http://localhost:3000/_next/static/development/pages/search/[type]/[cat]/[area].js"

I tried using :type instead of [type] but it also didn't work.

This is how it's configured on the server:

            if ('/search/:type/:cat/:area' === route.path) {
                return app.render(req, res, route.page);
            }

Folder Structure:
/pages/search/index.js

It should not reload the page while changing the route, that's the main thing I'm trying to accomplish.
I'm implementing SSR pagination, and I'm planning to use shallow routing to make page changes happen on the client instead of the server. Meaning achieve SSR on first load only, keep user in without refreshing.

[collegewap]

Try something like this?

    let asPath = router.asPath.split("?")[0];

    router.push(
      router.pathname + "?page=" + pageNum,
      asPath + "?page=" + pageNum,
      {
        shallow: true,
      }
    );

[omar-dulaimi]

Yeah, I've tried something similar:

    router.push(
          `/search/[type]/[cat]/[area]?${stringifyQs(currentQuery)}`,
          `/search/itemtype/category/areaname?${stringifyQs(currentQuery)}`,
          {
              shallow: true,
          }
      );