错误:导出HTML (src\pages\About.js)失败:不变失败

Question

我将Switch路由器组件添加到我的项目中，以便设置默认页面。当我构建它时，它会出现以下错误：

  Error: Failed exporting HTML for URL About (src\pages\About.js): Invariant failed

  - tiny-invariant.cjs.js:11 invariant
    [byte-artisan]/[tiny-invariant]/dist/tiny-invariant.cjs.js:11:11

  - history.min.js:1 Object.createBrowserHistory
    [byte-artisan]/[history]/cjs/history.min.js:1:3626

  - react-router-dom.min.js:1 new t
    [byte-artisan]/[react-router-dom]/cjs/react-router-dom.min.js:1:1036

  - react-dom-server.node.production.min.js:33 c
    [byte-artisan]/[react-dom]/cjs/react-dom-server.node.production.min.js:33:323

  - react-dom-server.node.production.min.js:36 Sa
    [byte-artisan]/[react-dom]/cjs/react-dom-server.node.production.min.js:36:1

  - react-dom-server.node.production.min.js:41 a.render
    [byte-artisan]/[react-dom]/cjs/react-dom-server.node.production.min.js:41:467

  - react-dom-server.node.production.min.js:41 a.read
    [byte-artisan]/[react-dom]/cjs/react-dom-server.node.production.min.js:41:58

  - react-dom-server.node.production.min.js:53 renderToString
    [byte-artisan]/[react-dom]/cjs/react-dom-server.node.production.min.js:53:83

  - exportRoute.js:127 renderToStringAndExtract
    [byte-artisan]/[react-static]/src/static/exportRoute.js:127:21

  - exportRoute.js:191 renderToStringAndExtract
    [byte-artisan]/[react-static]/src/static/exportRoute.js:191:15

  - runtime.js:62 tryCatch
    [byte-artisan]/[regenerator-runtime]/runtime.js:62:40

  - runtime.js:288 Generator.invoke [as _invoke]
    [byte-artisan]/[regenerator-runtime]/runtime.js:288:22

  - runtime.js:114 Generator.prototype.(anonymous function) [as next]
    [byte-artisan]/[regenerator-runtime]/runtime.js:114:21

  - exportRoute.js:52 asyncGeneratorStep
    [byte-artisan]/[react-static]/lib/static/exportRoute.js:52:103

  - exportRoute.js:54 _next
    [byte-artisan]/[react-static]/lib/static/exportRoute.js:54:194

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7

在运行站点时不会发生这种情况(npm运行启动)。

更奇怪的是，只有在构建站点时，一些页面才会出现。这些页面影响到每个构建，即使我在构建之间没有更改任何内容。

在这里，路由器声明：App.js

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch,
    Redirect
} from 'react-router-dom'

//pages
import './app.css'
import About from './pages/About'

function page404() {
    return (
        <div>
            <h2>page404</h2>
        </div>
    );
}

function App() {
    return (
        <Router>
            <div>
                <ul className="menu-bar">
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                </ul>
                <Switch>
                    <Route path="/About" component={About} />
                    <Route component={page404} />
                </Switch>
            </div>
        </Router>    
    )
}
export default App

环境:反应-静态v6.3.6

Answer 1

像这样移除路由器

function App() {
    return (
            <div>
                <ul className="menu-bar">
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                </ul>
                <Switch>
                    <Route path="/About" component={About} />
                    <Route component={page404} />
                </Switch>
            </div> 
    )
}
export default App

因为react静态插件react路由器已经用路由器包装好了。