使用navigate传递props时返回undefined的技术问题求助

错误原因分析 #

1. 路由参数拼接错误：父组件中navigate('/editproduct/'+{username})的写法是将{username}对象与字符串拼接，实际会生成/editproduct/[object Object]，根本没有传递正确的参数值。
2. 子组件参数获取方式错误：通过navigate跳转的组件，无法直接从组件props中拿到路由参数，必须使用React Router提供的专属钩子，且需提前配置对应路由规则。

修复步骤 #

第一步：修正父组件的navigate调用 #

方式1：URL路径传参（参数暴露在地址栏）

const navigate = useNavigate();
const componentChange = (username) => {
   // 直接拼接参数值，不要包裹对象括号
   navigate(`/editproduct/${username}`, {replace:true})
}

return (
    <button onClick={()=>componentChange(username)}>Edit</button>
)

方式2：state隐式传参（参数不暴露在地址栏）

const componentChange = (username) => {
   navigate('/editproduct', {
      replace:true,
      state: { username }
   })
}

第二步：配置对应路由规则 #

在路由配置文件（如App.js或独立路由文件）中，根据传参方式定义路由：

import { Routes, Route } from 'react-router-dom';
import EditProduct from './EditProduct';

// ...
<Routes>
  // 对应URL路径传参的路由规则，用:username标记参数位置
  <Route path="/editproduct/:username" element={<EditProduct />} />
  // 对应state隐式传参的路由规则，无需定义路径参数
  // <Route path="/editproduct" element={<EditProduct />} />
</Routes>

第三步：子组件正确获取参数 #

方式1：获取URL路径参数（用useParams钩子）

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

function EditProduct() {
    // 从路由参数中解构出username
    const { username } = useParams();
    console.log(username);
    return (
        <div className='p-5'>hello {username}</div>
    )
}

方式2：获取state隐式参数（用useLocation钩子）

import { useLocation } from 'react-router-dom';

function EditProduct() {
    const location = useLocation();
    // 加空对象兜底，避免state不存在时报错
    const { username } = location.state || {};
    console.log(username);
    return (
        <div className='p-5'>hello {username}</div>
    )
}

额外说明 #

直接调用子组件时<EditProduct username={username} />是通过组件props传递值，和路由跳转的参数传递逻辑完全独立，因此前者能正常取值，后者必须依赖React Router的路由参数机制。

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