在 npm 运行构建命令后，我没有在反应网站中获得主页组件我只获得导航栏和页脚

Question

在 npm 运行构建命令后，我没有在 React 网站的主页中获取主页组件。 运行命令 npm run build 后，我得到了 build 文件夹，当我打开 html 时，我只得到 Navbar 和 Footer 组件但是当我点击主页链接时，我的 index.js 代码一切正常

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
); 

App组件的代码是

import Navbar from './components/Navbar';
import Home from './components/Home';
import Footer from './components/Footer';
import Contact from './components/Contact';
import {
  Routes,
  Route,
} from "react-router-dom";
import About from './components/About';
import Review from './components/Review';

function App() {


  return (

    <>

      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/about" element={<About />} />
        <Route path="/review" element={<Review />} />
      </Routes>
      <Footer />


    </>

  );
}

export default App;

下面是我的导航栏组件的代码

import { Link } from 'react-router-dom';

export default function Navbar() {
    

    
  return (

    <>
        <header className='header'>
            <nav className="navbar">
                <div className="logo"><Link to="/"><i className="fas fa-home"></i>Real-E-State</Link></div>
                <div className="menu-btn" onClick={toggleMenu}>
                <i className="fas fa-bars"></i>
                </div>
                <div id='menu' className="menu">
                    <ul className="navlink">
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/about">About</Link></li>
                        <li><Link to="/contact">Contact</Link></li>
                        <li><Link to="/review">Reviews</Link></li>
                    </ul>
                </div>
                
            </nav>
        </header>
        
    </>
  );
}

我已经添加了"homepage":"." 但没有得到解决方案，这是我在使用 vs code 实时服务器打开时得到的

当我点击主页链接时，一切正常

Answer 1

当您直接打开 html 文件时，您的应用程序将无法运行，因为它没有被提供，您会看到 HTML 的“静态”非实时视图。当您使用npm start开发构建时，会为您启动开发服务器. npm run build仅构建您的应用程序的生产版本，它不会为您启动服务器。

请参见Create-React-App 部署

npm run build创建一个build目录，其中包含您的应用程序的生产构建。 设置您最喜欢的 HTTP 服务器，以便为您网站的访问者提供index.html ，并向 static 路径（如/static/js/main.<hash>.js ）的请求提供/static/js/main.<hash>.js的内容/static/js/main.<hash>.js文件。

Static 服务器

对于使用 Node 的环境，处理此问题的最简单方法是安装 serve 并让它处理 rest：

 npm install -g serve serve -s build

上面显示的最后一个命令将在端口 3000 上为您的 static 站点提供服务。与许多服务的内部设置一样，可以使用 -l 或 --listen 标志调整端口：

 serve -s build -l 4000

运行此命令以获取可用选项的完整列表：

 serve -h