react项目build之后的index.html有问题，怎么解决？

Question

react项目build之后的index.html有问题，怎么解决？
用create-react-app创建的项目，想要学习下打包上线，npm run start的时候是没问题的，可以正常原型，npm run build生成了文件夹build，打开build中的静态文件index.html,能够引用到对应的js文件和css文件，但是空白，控制台报了这个错误

打开audit.js文件是报了这句错误

但是实际上index.js中是使用了App组件，而App组件是使用了IndexRouter组件，IndexRouter组件中有一个路由的拦截，通过了确定有token了才进入主页面，才会加载侧边栏中的这个Audit组件
App.js

import IndexRouter from './router/IndexRouter'
import "./App.css"
import { Provider } from 'react-redux'
import { store,persistor } from './redux/store'
import { PersistGate } from 'redux-persist/integration/react'
function App() {
  return <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <IndexRouter></IndexRouter>
    </PersistGate>
  </Provider>

}
export default App

IndexRouter.js

import React from 'react'
import { HashRouter, Route, Switch,Redirect } from 'react-router-dom'
import Login from '../views/login/Login'
import NewsSandBox from '../views/sandbox/NewsSandBox'
import Detail from '../views/news/Detail'
import News from '../views/news/News'
export default function IndexRouter() {
    return (
        <HashRouter>
            <Switch>
                <Route path='/login' component={Login} />
                <Route path='/news' component={News} />
                <Route path='/detail/:id' component={Detail} />
                <Route path='/' render={() =>
                    localStorage.getItem("token") ? <NewsSandBox/> :<Redirect to="/login" />
                } />
            </Switch>
        </HashRouter>
    )
}

查询了网上没有类似的问题，可以提供点思路吗？

这个相对路由打包之前也在package.json做了homepage修改，也确实是使用了hashrouter

补充
NewsRouter

import React, { useState, useEffect } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import Home from '../../views/sandbox/home/Home'
import UserList from '../../views/sandbox/user-manage/UserList'
import RoleList from '../../views/sandbox/right-manage/RoleList'
import RightList from '../../views/sandbox/right-manage/RightList'
import Nopermission from '../../views/sandbox/nopermission/Nopermission'
import NewsAdd from '../../views/sandbox/news-manage/NewsAdd'
import NewsDraft from '../../views/sandbox/news-manage/NewsDraft'
import NewsPreview from '../../views/sandbox/news-manage/NewsPreivew'
import NewsUpdate from '../../views/sandbox/news-manage/NewsUpdate'
import NewsCategory from '../../views/sandbox/news-manage/NewsCategory'
import Audit from '../../views/sandbox/audit-manage/Audit'
import AuditList from '../../views/sandbox/audit-manage/AuditList'
import Unpublished from '../../views/sandbox/publish-manage/Unpublished'
import Published from '../../views/sandbox/publish-manage/Published'
import Sunset from '../../views/sandbox/publish-manage/Sunset'
import axios from 'axios'
import { Spin } from 'antd'
import { RadiusUprightOutlined } from '@ant-design/icons'
import { connect } from "react-redux"
import { HashRouter } from 'react-router-dom/cjs/react-router-dom.min'

const LocalRouterMap = {
    "/home": Home,
    "/user-manage/list": UserList,
    "/right-manage/role/list": RoleList,
    "/right-manage/right/list": RightList,
    "/news-manage/add": NewsAdd,
    "/news-manage/draft": NewsDraft,
    "/news-manage/category": NewsCategory,
    "/audit-manage/audit": Audit,
    "/audit-manage/list": AuditList,
    "/publish-manage/unpublished": Unpublished,
    "/publish-manage/published": Published,
    "/publish-manage/sunset": Sunset,
    "/news-manage/preview/:id": NewsPreview,
    "/news-manage/update/:id": NewsUpdate
}


function NewsRouter(props) {
    const [backRouterList, setbackRouterList] = useState([]);
    useEffect(() => {
        Promise.all([
            axios.get("/rights"),
            axios.get("/children")
        ]).then(res => {
            // console.log(res)
            setbackRouterList([...res[0].data, ...res[1].data])
            // console.log(backRouterList)

        })
    }, []);

    const { role: { rights } } = JSON.parse(localStorage.getItem("token"))
    const checkRoute = (item) => {
        // console.log(item)
        return LocalRouterMap[item.key] && (item.pagepermisson || item.routepermisson)
    }

    const checkUserPermission = (item) => {
        return rights.includes(item.key)
    }
    return (
        <Spin size="large" spinning={props.isLoading}>
            {/* <Switch>
            {
                backRouterList.map(item => {
                    if(checkRoute(item) && checkUserPermission(item)){
                        return <Route exact path={item.key} key={item.key} component={LocalRouterMap[item.key]}></Route>
                    }
                    return null
                })
            }
            <Redirect from="/" to="/home" exact />
            {/* { console.log(backRouterList)} */}
            {/* {   
               
                backRouterList.length > 0 && <Route path="*" component={Nopermission} />
            }
        </Switch> */} */}
            <HashRouter>
                <Switch>
                    {
                        backRouterList.map(item => {
                            if (checkRoute(item) && checkUserPermission(item)) {
                                return <Route exact path={item.key} key={item.key} component={LocalRouterMap[item.key]}></Route>
                            }
                            return null
                        })
                    }
                    <Redirect from="/" to="/home" exact />
                    {/* { console.log(backRouterList)} */}
                    {

                        backRouterList.length > 0 && <Route path="*" component={Nopermission} />
                    }
                </Switch>
            </HashRouter>
        </Spin>
    )
}
const mapStateToProps = ({ LoadingReducer: { isLoading } }) => {
    return {
        isLoading
    }
}
export default connect(mapStateToProps)(NewsRouter)

NewsSandBox

import React,{useEffect} from 'react'
import SideMenu from '../../components/sandbox/SideMenu'
import TopHeader from '../../components/sandbox/TopHeader'
import Nprogress from 'nprogress'
import "nprogress/nprogress.css"
import { Layout, theme } from 'antd'
import "./NewsSandBox.css"
import NewsRouter from '../../components/sandbox/NewsRouter'

const { Content } = Layout;
export default function NewsSandBox() {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  Nprogress.start();

  useEffect(() => {
    Nprogress.done();
  });

  return (
    <Layout>
      <SideMenu></SideMenu>

      <Layout>
        <TopHeader></TopHeader>

        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            overflow: "auto",
            background: colorBgContainer,

          }}
        >

          <NewsRouter></NewsRouter>
        </Content>
      </Layout>
    </Layout>
  )
}

Answer 1

打包后的项目需要放到服务器上预览，或者本地起一个静态服务也行。

Answer 2

你这个赋值语句写在了文件的顶层，这意味这当模块被导入的时候，这一行就会被执行（虽然你发的代码中我没找到你是如何导入 audit.js 的，但我想你应该不是动态导入的），所以此时就会报错。

解决方案就推荐将这一行移到组件内，这样在组件初始化时才会赋值。