reactjs - react-router-dom 版本 6 嵌套路由 Prop 未通过

Question

我无法从嵌套路由获取 props，Products 路由有嵌套路由，应该打印 pc 但我只得到 ssd，

这是因为我在嵌套路由中使用了相同的组件吗？或者我做错了什么。

App.js

<BrowserRouter>
      <div className="app">
        <Header />
        <Routes>
          <Route index element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="products" element={<Products name="ssd"/>}>
            <Route path=":id" element={<Products ye="pc" />} />
          </Route>
          <Route path="*" element={<Err />}/>
        </Routes>
      </div>
    </BrowserRouter>

产品.jsx

import React from 'react'
import { useParams } from 'react-router-dom'

function Products(props) {
    const {id} = useParams(); 
    console.log(props);
  return (
    <div>
        <p>This product : {props.name} is in stock</p>
        <p>The id from the params is : {id}</p>
        <p>ye is : {props.ye}</p>
    </div>
  )
}

export default Products

这是控制台的屏幕截图，显示只有 ssd 被传递

Answer 1

Products 缺少为要呈现到的嵌套 Route 呈现 Outlet。

import React from 'react'
import { Outlet, useParams } from 'react-router-dom'

function Products(props) {
  const { id } = useParams(); 
  console.log(props);
  return (
    <div>
      <p>This product : {props.name} is in stock</p>
      <p>The id from the params is : {id}</p>
      <p>ye is : {props.ye}</p>
      <Outlet /> // <-- nested routes render out here
    </div>
  )
}

或者，如果您不想将 Products 组件嵌套在其他 Products 组件中，请将 Outlet 呈现为布局组件并创建“ssd”路由的索引路由。如果未指定 element 属性，则 Route 组件默认呈现一个 Outlet。

<Route path="/products">
  <Route index element={<Products name="ssd" />} />   // <-- "/products"
  <Route path=":id" element={<Products ye="pc" />} /> // <-- "/products/1234"
</Route>