JSX文件为什么在浏览器中不显示?

huangapple go评论99阅读模式
英文:

Why JSX file doesn't appear in browser?

问题

I try to build e-commerce app using reactjs and i got a problem on frontend, the page is not showing in browser. This page is for admin page that can do CRUD on product.

here is Admin.jsx code

  1. import React, { useState } from 'react';
  2. function Admin() {
  3. const [products, setProducts] = useState([]);
  4. const [newProduct, setNewProduct] = useState('');
  5. const handleAddProduct = () => {
  6. if (newProduct !== '') {
  7. setProducts([...products, newProduct]);
  8. setNewProduct('');
  9. }
  10. };
  11. const handleDeleteProduct = (index) => {
  12. const updatedProducts = [...products];
  13. updatedProducts.splice(index, 1);
  14. setProducts(updatedProducts);
  15. };
  16. return (
  17. <div>
  18. <h2>Admin Page</h2>
  19. <h3>Add Product</h3>
  20. <input
  21. type="text"
  22. value={newProduct}
  23. onChange={(e) => setNewProduct(e.target.value)}
  24. />
  25. <button onClick={handleAddProduct}>Add</button>
  26. <h3>Product List</h3>
  27. <ul>
  28. {products.map((product, index) => (
  29. <li key={index}>
  30. {product}
  31. <button onClick={() => handleDeleteProduct(index)}>Delete</button>
  32. </li>
  33. ))}
  34. </ul>
  35. </div>
  36. );
  37. }
  38. export default Admin;

and here is the main app

  1. import React from 'react';
  2. import './App.css';
  3. import { BrowserRouter, Routes, Route } from 'react-router-dom';
  4. import Layout from './components/Layout';
  5. import Home from './pages/Home';
  6. import About from './pages/About';
  7. import Contact from './pages/Contact';
  8. import Wishlist from './components/Wishlist';
  9. import Login from './pages/Login';
  10. import Register from './pages/Register';
  11. import SingleProduct from './pages/SingleProduct';
  12. import Cart from './components/Cart';
  13. import Admin from './pages/Admin';
  14. function App() {
  15. return (
  16. <>
  17. <BrowserRouter>
  18. <Routes>
  19. <Route path="/" element={<Layout />} >
  20. <Route index element={<Home />} />
  21. <Route path="about-us" element={<About />} />
  22. <Route path="contact" element={<Contact />} />
  23. <Route path="wishlist" element={<Wishlist />} />
  24. <Route path="login" element={<Login />} />
  25. <Route path="register" element={<Register />} />
  26. <Route path="product/:id" element={<SingleProduct />} />
  27. <Route path="cart" component={<Cart />} />
  28. <Route path="admin" component={<Admin />} />
  29. </Route>
  30. </Routes>
  31. </BrowserRouter>
  32. </>
  33. );
  34. }
  35. export default App;

File placements is already correct but is still not showing on my browser.
Any help would be appreciated. Thank you

英文:

I try to build e-commerce app using reactjs and i got a problem on frontend, the page is not showing in browser. This page is for admin page that can do CRUD on product.

here is Admin.jsx code

  1. import React, { useState } from &#39;react&#39;;
  2. function Admin() {
  3. const [products, setProducts] = useState([]);
  4. const [newProduct, setNewProduct] = useState(&#39;&#39;);
  5. const handleAddProduct = () =&gt; {
  6. if (newProduct !== &#39;&#39;) {
  7. setProducts([...products, newProduct]);
  8. setNewProduct(&#39;&#39;);
  9. }
  10. };
  11. const handleDeleteProduct = (index) =&gt; {
  12. const updatedProducts = [...products];
  13. updatedProducts.splice(index, 1);
  14. setProducts(updatedProducts);
  15. };
  16. return (
  17. &lt;div&gt;
  18. &lt;h2&gt;Admin Page&lt;/h2&gt;
  19. &lt;h3&gt;Add Product&lt;/h3&gt;
  20. &lt;input
  21. type=&quot;text&quot;
  22. value={newProduct}
  23. onChange={(e) =&gt; setNewProduct(e.target.value)}
  24. /&gt;
  25. &lt;button onClick={handleAddProduct}&gt;Add&lt;/button&gt;
  26. &lt;h3&gt;Product List&lt;/h3&gt;
  27. &lt;ul&gt;
  28. {products.map((product, index) =&gt; (
  29. &lt;li key={index}&gt;
  30. {product}
  31. &lt;button onClick={() =&gt; handleDeleteProduct(index)}&gt;Delete&lt;/button&gt;
  32. &lt;/li&gt;
  33. ))}
  34. &lt;/ul&gt;
  35. &lt;/div&gt;
  36. );
  37. }
  38. export default Admin;

and here is the main app

  1. import React from &#39;react&#39;;
  2. import &#39;./App.css&#39;;
  3. import {BrowserRouter, Routes, Route} from &#39;react-router-dom&#39;;
  4. import Layout from &#39;./components/Layout&#39;;
  5. import Home from &#39;./pages/Home&#39;;
  6. import About from &#39;./pages/About&#39;;
  7. import Contact from &#39;./pages/Contact&#39;;
  8. import Wishlist from &#39;./components/Wishlist&#39;;
  9. import Login from &#39;./pages/Login&#39;;
  10. import Register from &#39;./pages/Register&#39;;
  11. import SingleProduct from &#39;./pages/SingleProduct&#39;;
  12. import Cart from &#39;./components/Cart&#39;;
  13. import Admin from &#39;./pages/Admin&#39;;
  14. function App() {
  15. return (
  16. &lt;&gt;
  17. &lt;BrowserRouter&gt;
  18. &lt;Routes&gt;
  19. &lt;Route path=&quot;/&quot; element={&lt;Layout /&gt;}&gt;
  20. &lt;Route index element={&lt;Home /&gt;} /&gt;
  21. &lt;Route path=&quot;about-us&quot; element={&lt;About /&gt;} /&gt;
  22. &lt;Route path=&quot;contact&quot; element={&lt;Contact /&gt;} /&gt;
  23. &lt;Route path=&quot;wishlist&quot; element={&lt;Wishlist /&gt;} /&gt;
  24. &lt;Route path=&quot;login&quot; element={&lt;Login /&gt;} /&gt;
  25. &lt;Route path=&quot;register&quot; element={&lt;Register /&gt;} /&gt;
  26. &lt;Route path=&quot;product/:id&quot; element={&lt;SingleProduct /&gt;} /&gt;
  27. &lt;Route path=&quot;cart&quot; component={&lt;Cart /&gt;} /&gt;
  28. &lt;Route path=&quot;admin&quot; component={&lt;Admin /&gt;} /&gt;
  29. &lt;/Route&gt;
  30. &lt;/Routes&gt;
  31. &lt;/BrowserRouter&gt;
  32. &lt;/&gt;
  33. );
  34. }
  35. export default App;

File placements is already correct but is's still not showing on my browser.
Any help would be appreciated. Thank you

答案1

得分: 1

我相当肯定这是因为你在这里使用了 component={&lt;Admin /&gt;},而应该像其他地方一样使用 element={&lt;Admin /&gt;}(除了 cart,我怀疑它也不起作用)。

英文:

I'm pretty sure it's because you have component={&lt;Admin /&gt;} when it should be element={&lt;Admin /&gt;} like all the rest (except cart which I suspect also doesn't work)

答案2

得分: 0

从父布局路线中移除路径。更新您代码的这部分:

  1. &lt;Route element={&lt;Layout /&gt;}&gt;
英文:

Remove the path from Parent Layout Route. Update this part of your code:-

  1. &lt;Route element={&lt;Layout /&gt;}&gt;

huangapple
  • 本文由 发表于 2023年5月11日 05:54:08
  • 转载请务必保留本文链接:https://go.coder-hub.com/76222815.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定