reactjs - react 快照给出 react 路线错误

Question

React snap 和 React 路由似乎不能一起正常工作并给出错误。这是错误

 -- ASYNC --
    at Frame.<anonymous> (/Users/apple/Desktop/xyz-web-app/node_modules/puppeteer/lib/helper.js:111:15)
    at Page.goto (/Users/apple/Desktop/xyz-web-app/node_modules/puppeteer/lib/Page.js:629:49)
    at Page.<anonymous> (/Users/apple/Desktop/xyz-web-app/node_modules/puppeteer/lib/helper.js:112:23)
    at fetchPage (/Users/apple/Desktop/xyz-web-app/node_modules/react-snap/src/puppeteer_utils.js:232:22)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7) name: 'TimeoutError' }

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! xyz-web-app@0.1.0 postbuild: `react-snap`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the xyz-web-app@0.1.0 postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/apple/.npm/_logs/2019-06-24T09_10_08_310Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! xyz-web-app@0.1.0 build:dev: `REACT_APP_API_ENV=dev REACT_APP_DEV_ANALYTICS=true npm run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the xyz-web-app@0.1.0 build:dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/apple/.npm/_logs/2019-06-24T09_10_08_348Z-debug.log

我将 React snap 与一个简单的 Web 应用程序一起使用，该应用程序中没有路由，构建后也没有错误，我可以看到生成了 200.html 文件，但是我们在生产中使用了该应用程序，并且在应用程序中有许多路由。 js 似乎会抛出这些错误。我无法弄清楚为什么在这种情况下会出现超时错误以及我们如何克服这个问题。

我们的路线和这个有些相似"react-snap and react-router together make a problem "

Answer 1

我想为时已晚，但万一有人看到这个，我检测到没有“路径”的路由导致了这个问题。

这是错误片段

✅  crawled 38 out of 41 (/product/guitar)
✅  crawled 39 out of 41 (/product/keyboard)
�  error at /404.html TimeoutError: Navigation Timeout Exceeded: 30000ms exceeded
    at C:\wamp64\www\musichouse\node_modules\puppeteer\lib\LifecycleWatcher.js:142:21
  -- ASYNC --
    at Frame.<anonymous> (C:\wamp64\www\musichouse\node_modules\puppeteer\lib\helper.js:111:15)
    at Page.goto (C:\wamp64\www\musichouse\node_modules\puppeteer\lib\Page.js:674:49)
    at Page.<anonymous> (C:\wamp64\www\musichouse\node_modules\puppeteer\lib\helper.js:112:23)
    at fetchPage (C:\wamp64\www\musichouse\node_modules\react-snap\src\puppeteer_utils.js:232:22)
    at processTicksAndRejections (internal/process/task_queues.js:94:5) {
  name: 'TimeoutError'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! music@0.1.0 postbuild: `react-snap`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the music@0.1.0 postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

所以如果我们看一下代码片段

  export default function App() {
      return (
        <div className="App">
          <Route path="/article/:id">
            <Article />
          </Route>
          <Route path="/cart/">
            <CartPage />
          </Route>
          <Route path="/order/:status">
            <OrderStatus />
          </Route>
          <Route> <----------------<<<< without PATH="someRoute"
            ////////////////////////////////////
            // this was causing that error!!! //
            ////////////////////////////////////
            <Error404 />
          </Route>
        </div>
      );
    }

如果我评论那部分，一切都很完美!希望对您有所帮助 ;)