javascript 如何修复“npm启动”react应用程序后出现的白色?

3yhwsihp  于 2023-02-07  发布在  Java
关注(0)|答案(1)|浏览(125)

所以我创建了一个电子商务网站使用React,它是完美的工作。然而,我不小心删除了packagej.son文件,我最近恢复了它,它到底是怎么回事之前,但现在每当我尝试运行应用程序,我得到一个白色。该应用程序正在编译,没有错误,似乎工作正常。我已经尝试了一切,并已调试了几个小时。请帮助我。
如果这个问题是坏的,请不要石板我新的堆栈溢出。

这是我的包裹

{
  "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"
    ]
  }
}
`

这是我的应用程序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;

这是我的索引.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 />);``

这是我的输出:Output

'
我尝试过的:
1.将package.json中的“主页”更改为我的git仓库和localhost:3000
1.每当我在j中更改了一些内容时运行build,儿子
1.已尝试更改默认本地主机端口
1.已将BrowserRouter更改为HashRouter,但未消除白色。

lsmepo6l

lsmepo6l1#

如果没有更多的上下文或错误日志,很难确定问题的根本原因,但您可以尝试以下几个步骤:
1.检查SingleBlogSingleProduct中导入的组件是否正确导入并按预期工作。
1.检查布线路径值,并确保它们与零部件文件名匹配。
1.您可以尝试添加一个包含所有内容的Route组件,以查看路由本身是否存在问题,如下所示:
<Route path="*" element={<div>Page not found</div>} />
1.尝试清除浏览器缓存,看看是否有帮助。
如果这些步骤都不起作用,您可能希望尝试以console.log语句的形式添加一些调试信息,以查看问题可能源自何处。

相关问题