错误：为 URL About (src\pages\About.js) 导出 HTML 失败：不变量失败

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 run start)。

更奇怪的是，仅在构建站点时发生，对于某些页面。即使我在构建之间没有更改任何内容，受影响的页面也会在每个构建中发生变化。

这里是路由器声明： 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

环境：react-static 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-static-plugin-react-router 已经用 Router 封装了它