关于react的index.html不显示挂载组件的问题

我将react打包部署到服务器上访问正常，但是我打开index.html时发现body是空的。

index.js如图

img

Direction.js如下

import React,{Component} from "react";
import {BrowserRouter , Route, Routes } from "react-router-dom";

import MinePage from "./components/MinePage";
import ProvideAdvice from "./components/ProvideAdvice";
import ManuRegister from "./components/ManuRegister";
import Register from "./components/Register";
import ManufacturerInfo from "./components/ManufacturerInfo";
import ProductDetails from "./components/ProductDetails";
import MerchantPanel from "./components/MerchantPanel";
import Home from "./components/Home";

import Admine from "./components/admine/Admine";
import MainPage from "./components/admine/MainPage";
import Pay from "./components/Pay";
import ProductPay from "./components/ProductPay";

import PhoneHome from "./components/phonejs/PhoneHome";
import PhoneManu from "./components/phonejs/PhoneManu";
import PhoneProduct from "./components/phonejs/PhoneProduct";
import PhoneSignup from "./components/phonejs/PhoneSignup";
import PhoneManuSignup from "./components/phonejs/PhoneManuSignup";
import RFQ from "./components/publicComponent/RFQ";

class Direction extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    
    render() {
        return (
            <div>
                <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/ManufacturerInfo" element={<ManufacturerInfo />} />
                    <Route path="/ProductDetails" element={<ProductDetails />} />
                    <Route path="/RFQ" element={<RFQ />} />
                    <Route path="/Register" element={<Register />} />
                    <Route path="/ManuRegister" element={<ManuRegister />} />
                    <Route path="/ProvideAdvice" element={<ProvideAdvice />} />
                    <Route path="/MinePage" element={<MinePage />} />
                    <Route path="/MerchantpanelPanel" element={<MerchantPanel />} />

                    <Route path="/yulong" element={<Admine />} />
                    <Route path="/mainPage" element={<MainPage />} />

                    <Route path="/pay" element={<Pay />} />
                    <Route path="/product/pay" element={<ProductPay />} />
            
                    <Route path="/phoneHome" element={<PhoneHome />} />
                    <Route path="/phoneManu" element={<PhoneManu />} />
                    <Route path="/phoneProduct" element={<PhoneProduct />} />
                    <Route path="/phoneSignup" element={<PhoneSignup />} />
                    <Route path="/phoneManuSignup" element={<PhoneManuSignup />} />


                </Routes>
                </BrowserRouter>
            </div>
        );
    }
}

export default Direction;

Home是应该显示的首页

打包后打开index.html时是空白页

img

这样谷歌蜘蛛抓取index.html时是空的，但是通过url访问网站一切正常。不知道问什么直接打开index.html时会是空白的？

打包之后访问的吗? 一般打包后要启动一个服务才行。 可以用Live Server

  • 这篇博客: 【React】＜JavaScript框架＞React脚手架&组件编码流程中的 index.html： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--图标-->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
</head>
<body>
<div id="root"></div>
</body>
</html>