dev-static.js 引入 react-async-bootstrapper 后报错了

来源:3-7 服务端渲染优化

Umbrella_汪

2019-04-04

学习《3-7 服务端渲染优化》的时候,引入了 react-async-bootstrapper, 运行后报错了。

代码:

// dev-static.js 

// ...

module.exports = function(server) {
  server.use(
    "/public",
    proxy({
      target: STATIC_HOST
    })
  );

  server.use("*", (req, res) => {
    getTemplate()
      .then(response => {
        let template = response.data;
        let url = req.originalUrl;
        let context = {};
        let stores = createStoreMap ? createStoreMap() : {};
        let renderResult = "";

        if (serverBundle) {
          let app = serverBundle(url, context, stores);

          bootstrapper(app).then(() => {
            renderResult = ReactDOMServer.renderToString(app);

            console.log("打印count");
            console.log(JSON.stringify(stores.appState.count));

            if (context.url) {
              res.status(302).setHeader("Location", context.url);
              res.end();
            } else {
              res.send(template.replace("<!-- app -->", renderResult));
            }
          });
        } else {
          res.send(template);
        }
      })
      .catch(err => {
        console.error(err);
      });
  });
};

报错信息:

Warning: Rendering <Context.Consumer.Provider> is not supported and will be removed in a future major release. Did you mean to render <Context.Provider> instead?

Warning: Rendering <Context.Consumer.Consumer> is not supported and will be removed in a future major release. Did you mean to render <Context.Consumer> instead?

(node:4720) UnhandledPromiseRejectionWarning: Error: Invariant failed: You should not use <Link> outside a <Router>
    at invariant (webpack-internal:///./node_modules/tiny-invariant/dist/tiny-invariant.esm.js:12:11)
    at Object.eval [as children] (webpack-internal:///./node_modules/react-router-dom/esm/react-router-dom.js:187:88)
    at recursive (G:\front_end\react-ser\node_modules\react-tree-walker\dist\react-tree-walker.js:129:41)
    at G:\front_end\react-ser\node_modules\react-tree-walker\dist\react-tree-walker.js:153:26
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:182:7)
    
(node:4720) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)

(node:4720) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
写回答

2回答

弹指十年

2019-05-08

"react-async-bootstrapper": "^2.1.1",

"react-router-dom": "^4.2.2",

以上两个版本配合可以

如果"react-router-dom": "^5.0.0",则会出现如题错误,调试了一天啦,得出的结论,希望帮助到其它同学,如有好的解决办法,也请告知

2
0

Jokcy

2019-04-04

这边的报错的意思是你的Link组件用在了Router组件之外,这可能是你的react-router的使用问题,上面的warning看上去可能跟后面的报错有关,建议查看react-router的版本。

0
3
james_guo
回复
Umbrella_汪
遇到同样的问题,请问你解决了吗?
2019-04-24
共3条回复

React全栈+服务器渲染(ssr)打造社区Webapp

【毕设面试】只会写业务代码?out了,带你学会搭建属于自己的工程!

768 学习 · 414 问题

查看课程