我如何在“npm 启动”我的 React 应用程序后修复白屏？

Question

因此，我使用 React 创建了一个电子商务网站，并且运行良好。然而，我不小心删除了 packagej.son 文件，我最近恢复了它，它完全是以前的样子，但是现在每当我尝试运行该应用程序时，我都会看到一个白屏。该应用程序编译无误，似乎运行良好。我已经尝试了所有方法并且已经调试了几个小时。请帮我。

如果问题不好，请不要指责我是堆栈溢出的新手。

这是我的 package.json：

  "name": "ecommerce-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-fast-marquee": "^1.3.5",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.7.1",
    "react-image-zoom": "^1.3.1",
    "react-rating-stars-component": "^2.2.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.8.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
`

**here is my App.js:**
`import React from 'react';
`import './App.css';`
`import {  BrowserRouter,Routes,Route } from 'react-router-dom';
`import Layout from './components/Layout';
`import Home from './pages/Home';`
`import About from './pages/About';`
`import Contact from './pages/Contact';`

`import OurStore from './pages/OurStore';``

`import Blogs from './pages/Blogs';`
`import CompareProduct from './pages/CompareProduct';`
`import Wishlist from './pages/Wishlist';`
`import Login from './pages/Login';
`import Cart from './pages/Cart';``
`import Forgotpassword from './pages/Forgotpassword';`
`import Signup from './pages/Signup';`
 import Resetpassword from './pages/Resetpassword';
 import SingleBlog from './pages/SingleBlog';
 import PrivacyPolicy from './pages/PrivacyPolicy';
 import RefundPolicy from './pages/RefundPolicy';
 import ShippingPolicy from './pages/ShippingPolicy';
 import TermsOfService from './pages/TermsOfService';
 import SingleProduct from './pages/SingleProduct';
 import Checkout from './pages/Checkout';
 function App() {
  return (
    <>
    <BrowserRouter>
    <Routes>
      <Route path="/" element= {<Layout />}>
        <Route index element={<Home />}/>
        <Route path="about" element={<About />}/>
        <Route path="contact" element={<Contact />}/>
        <Route path="store" element={<OurStore />}/>
        <Route path="/product/:id" element={<SingleProduct />}/>
        <Route path="blogs" element={<Blogs />}/>
        <Route path="/blog:id" element={<SingleBlog />}/>
        <Route path="compare-product" element={<CompareProduct />}/>
        <Route path="wishlist" element={<Wishlist />}/>
        <Route path="login" element={<Login />}/>
        <Route path="cart" element={<Cart />}/>
        <Route path="checkout" element={<Checkout />}/>
        <Route path="forgot-password" element={<Forgotpassword />}/>
        <Route path="sign-up" element={<Signup />}/>
        <Route path="reset-password" element={<Resetpassword />}/>
        <Route path="privacy-policy" element={<PrivacyPolicy />}/>
        <Route path="refund-policy" element={<RefundPolicy />}/>
        <Route path="shipping-policy" element={<ShippingPolicy />}/>
        <Route path="terms-and-conditions" element={<TermsOfService />}/>

      </Route>
      </Routes>
      </BrowserRouter>
    </>
  );
}`

export default App;

**here is my index.js:**


`import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';

 const container = document.getElementById('root');
 const root = createRoot(container);
`
`root.render(<App />);``
**
Heres my output:**
[Output](https://i.stack.imgur.com/7MABA.png)


`


what ive tried:
1. changing "homepage" in the package.json to my git repository and localhost:3000
2. run build whenever i changed something in the j,son
3. tried changing the default localhost port
4. changed BrowserRouter to HashRouter 
but none gets rid of the white screen.

Answer 1

如果没有更多上下文或错误日志，则很难确定问题的根本原因，但您可以尝试以下几个步骤：

1. 检查在 SingleBlog 和 SingleProduct 中导入的组件是否正确导入并按预期工作。

2. 检查路由路径值并确保它们与组件文件名匹配。

3. 您可以尝试添加一个包罗万象的 Route 组件来查看路由本身是否存在问题，如下所示：

   <Route path="*" element={<div>Page not found</div>} />

4. 尝试清除浏览器缓存以查看是否有帮助。

   如果这些步骤都不起作用，您可能想尝试以 console.log 语句的形式添加一些调试信息，以查看问题可能源自何处。