所以我创建了一个电子商务网站使用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,但未消除白色。
1条答案
按热度按时间lsmepo6l1#
如果没有更多的上下文或错误日志,很难确定问题的根本原因,但您可以尝试以下几个步骤:
1.检查
SingleBlog
和SingleProduct
中导入的组件是否正确导入并按预期工作。1.检查布线路径值,并确保它们与零部件文件名匹配。
1.您可以尝试添加一个包含所有内容的Route组件,以查看路由本身是否存在问题,如下所示:
<Route path="*" element={<div>Page not found</div>} />
1.尝试清除浏览器缓存,看看是否有帮助。
如果这些步骤都不起作用,您可能希望尝试以console.log语句的形式添加一些调试信息,以查看问题可能源自何处。