使用 withRouter 和自定义服务器的浅层路由不起作用

Question

使用 withRouter 作为自定义服务器的包装器，浅层路由似乎不起作用。

我目前使用这种方法来改变路线：

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

router 属性来自使用 withRouter 包装我的 class 组件。

而且想不出把浅旗放在哪里。所以我切换到文档中提到的方法：

this.props.router.push('/post/[pid]?hello=123', '/post/abc?hello=123', { shallow: true })

所以我手动做了，但我开始收到 404s。

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

解码：

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

我尝试使用 :type 而不是 [type]，但它也没有用。

这是它在服务器上的配置方式：

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

文件夹结构：

/pages/search/index.js

我认为这个结构与问题有关，因为它在 index.js 而不仅仅是 pages 文件夹中的普通文件。

它不应该在更改路由时重新加载页面，这是我要完成的主要任务。我正在实施 SSR 分页，并且我计划使用浅路由来使页面更改发生在客户端而不是服务器上。意思是只在第一次加载时实现 SSR，让用户在不刷新的情况下。

我也试过这个：

server.get('/search/:type/:cat/:area', (req, res) => {
         console.log("reached here...");   // this gets logged
        return app.render(
            req,
            res,
            '/search/[type]/[cat]/[area]',
            req.params
        );
});

但是我得到 404，页面现在不存在！

这也没有用：

   this.props.router.push(
        `/search/[type]/[cat]/[area]?${stringifyQs(currentQuery)}`,
        {
            pathname: currentPath,
            query: currentQuery,
        },
        { shallow: true }
    );

Answer 1

这应该有效：

server.js

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

pages/search/index.js

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

来自 GitHub

的链接问题

使用 withRouter 和自定义服务器的浅层路由不起作用

Shallow routing using withRouter and custom server not working

reactjs

server-side-rendering

next.js