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
import React, { useState } from 'react';
function Admin() {
const [products, setProducts] = useState([]);
const [newProduct, setNewProduct] = useState('');
const handleAddProduct = () => {
if (newProduct !== '') {
setProducts([...products, newProduct]);
setNewProduct('');
}
};
const handleDeleteProduct = (index) => {
const updatedProducts = [...products];
updatedProducts.splice(index, 1);
setProducts(updatedProducts);
};
return (
<div>
<h2>Admin Page</h2>
<h3>Add Product</h3>
<input
type="text"
value={newProduct}
onChange={(e) => setNewProduct(e.target.value)}
/>
<button onClick={handleAddProduct}>Add</button>
<h3>Product List</h3>
<ul>
{products.map((product, index) => (
<li key={index}>
{product}
<button onClick={() => handleDeleteProduct(index)}>Delete</button>
</li>
))}
</ul>
</div>
);
}
export default Admin;
and here is the main app
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 Wishlist from './components/Wishlist';
import Login from './pages/Login';
import Register from './pages/Register';
import SingleProduct from './pages/SingleProduct';
import Cart from './components/Cart';
import Admin from './pages/Admin';
function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about-us" element={<About />} />
<Route path="contact" element={<Contact />} />
<Route path="wishlist" element={<Wishlist />} />
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="product/:id" element={<SingleProduct />} />
<Route path="cart" component={<Cart />} />
<Route path="admin" component={<Admin />} />
</Route>
</Routes>
</BrowserRouter>
</>
);
}
export default App;
File placements is already correct but is’s still not showing on my browser.
Any help would be appreciated. Thank you
2
Answers
I’m pretty sure it’s because you have
component={<Admin />}
when it should beelement={<Admin />}
like all the rest (exceptcart
which I suspect also doesn’t work)Remove the path from Parent Layout Route. Update this part of your code:-