Shallow routing while using withRouter not working

Bug report

Describe the bug

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

To Reproduce

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

Expected behavior

It should not reload the page while changing the route, that’s the main thing I’m trying to accomplish.

System information

• OS: [Ubuntu 18.04]
• Browser (if applies) [chrome]
• Version of Next.js: [9.2.1]
• Version of Node.js: [12.18.0]

Additional context

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 of first load only, keep user in without refreshing.

This is might be related #4545

[jamesmosier]

My working test case just displays what you mentioned originally in this issue that shallow rendering works with a custom server and dynamic routes. It:

added a query param without reloading the page

which should resolve this issue.

---

As for your other issue, I’m not sure what that tests case is supposes to do.

`/search?type=foo&cat=bar&area=baz&counter=${counter}`,
`/search/foo/bar/baz?counter=${counter + 1}`,

would be

`/search?type=foo&cat=bar&area=baz&counter=0`,
`/search/foo/bar/baz?counter=1`,

which would be different counter values

[jamesmosier]

This should work:

  server.get('/search/:type/:cat/:area', (req, res) => {
    return app.render(req, res, '/search', {
      ...req.params,
      ...req.query,
    });
  });

props.router.push(
  '/search?type=foo&cat=bar&area=baz&counter=10',
  '/search/foo/bar/baz?counter=10',
  { shallow: true }
);