我正在使用react-router-dom来创建不同页面的路由，它正在加载除产品页面之外的所有页面

Question

我是新来的反应。我正在使用react-router-dom库来定义我的程序的路由，它适用于除产品页面之外的所有页面，并且在Route.js中我不明白为什么？

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

//App.js

import { createBrowserRouter,RouterProvider} from "react-router-dom";
import HomePage from "./Pages/home";
import Contact from './Pages/contact';
import AboutPage from "./Pages/About";
import RootLayout from "./Pages/Root";
import ErrorPage from "./Pages/error";
import ProductPage from "./Pages/Product";
import ProductDetails from "./Pages/ProductDetails";

const router = createBrowserRouter([
  {
      path: '/',
      elements: <RootLayout />,
      errorElement: <ErrorPage />,
      children: [
        {path:'/', element:<HomePage />},
          { path: 'contact', element: <Contact /> },
          { path: 'about', element: <AboutPage /> },
          { path: 'product', elements: <ProductPage /> },
          { path: 'product/:productId', element: <ProductDetails /> },
      ],
  },
]);

function App() {
  return (
  <RouterProvider router={router} />
  );
}

export default App;

//product.js
import {Link} from 'react-router-dom'


const ProductPage=()=>{
  const PRODUCTS=[
    {productId:'p1', title:'Product 1'},
    {productId:'p2', title:'Product 2'},
    {productId:'p3', title:'Product 3'},
    {productId:'p4', title:'Product 4'},
    {productId:'p5', title:'Product 5'},
]
    return (
    <>
    <h1>Products Page</h1>
    <ul>
      {PRODUCTS.map((prod)=>(
        <l1 key={prod.productId}>
            <Link to={`/product/${prod.productId}`}>{prod.title}</Link>
        </l1>
      ))}
    </ul>
    </>
    );
}
export default ProductPage;

//Route.js
import {Outlet} from "react-router-dom";
import Navigation from "../components/navigation";

const RootLayout=()=>{
    return (
        <>
       <Navigation />
       <Outlet />
       </>
    )
}
export default RootLayout;

不起作用本应出现在所有页面的顶部，但它根本不起作用，请帮助我。 每当我访问 http://localhost:3000/product 页面时，它都会向我显示

''位置“/product”处的匹配叶路由没有元素或组件。这意味着默认情况下它将呈现一个空值，从而导致“空”页面''

这个错误

Answer 1

Route

组件没有任何

elements

道具，它是

element

。

更正代码

• 来自

  { path: 'product', elements: <ProductPage /> }

• 到

  { path: 'product', element: <ProductPage /> }

const router = createBrowserRouter([
  {
    elements: <RootLayout />,
    errorElement: <ErrorPage />,
    children: [
      { path: '/', element: <HomePage />},
      { path: 'contact', element: <Contact /> },
      { path: 'about', element: <AboutPage /> },
      { path: 'product', element: <ProductPage /> },
      { path: 'product/:productId', element: <ProductDetails /> },
    ],
  },
]);