Question

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

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

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

router prop来自使用withRouter包装我的类组件。

并且不知道在哪里放置浅标记。所以我切换到文档中提到的方法：

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

所以我手动完成了，但是我开始得到404。

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中，而不仅仅是页面文件夹中的普通文件。

在更改路线时不应重新加载页面，这是我要完成的主要工作。我正在实现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和自定义服务器的浅层路由不起作用

1 个答案: