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

Question

学习《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.

Answer 1

弹指十年 2019-05-08 16:13:45

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

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

以上两个版本配合可以

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

Answer 2

Jokcy 2019-04-04 18:18:01

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

• 提问者 Umbrella_汪 #1

  没有在Router组件之外使用Link组件。不使用 react-async-bootstrapper 的话没报错。

• Aicheng123 回复 提问者 Umbrella_汪 #2

  回复 Umbrella_汪 @Jokcy  这个问题解决了吗？

• james_guo 回复 提问者 Umbrella_汪 #3

  遇到同样的问题，请问你解决了吗？