React项目中Admin.jsx页面无法在浏览器显示的问题求助

我正在用ReactJS搭建电商应用，前端遇到问题：用于产品CRUD操作的Admin页面无法在浏览器中显示，已确认文件路径正确。以下是相关代码：

Admin.jsx代码 #

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;

主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;

问题出在react-router-dom v6的路由配置语法上：

• react-router-dom v6 已废弃component属性，统一使用element属性指定路由对应组件
• 代码中Cart和Admin路由错误使用component={<Cart />}、component={<Admin />}，不符合v6语法规范

修改App.js中的路由配置，将component替换为element即可：

// 修改后的路由部分
<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 />} />
  {/* 修正Cart路由 */}
  <Route path="cart" element={<Cart />} />
  {/* 修正Admin路由 */}
  <Route path="admin" element={<Admin />} />
</Route>

修改完成后重启项目，访问/admin路径即可正常显示Admin页面。

内容的提问来源于stack exchange，提问作者fay