React路由props.location值为undefined问题求助及替代方案咨询

问题说明 #

尝试通过Link标签传递完整用户信息，需求是用户点击卡片后跳转至/detail页面并获取传递的用户对象，但控制台输出undefined。

相关代码 #

App.js #

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/detail" element={<Detail />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Detail/index.js #

function Detail(props) {
console.log(props.location);

return(<h1>hi</h1>);

}

export default Detail;

其他文件（跳转触发代码） #

const location = {
    pathname: "/detail",
    search: `?name=${c.name}`,
    state: c,
  };

 <Link to={location}>
</Link>

问题解决方法 #

在React Router v6版本中，路由组件不再通过props自动接收location、history等路由对象，直接访问props.location会得到undefined。需要使用useLocation钩子来获取路由状态：

1. 在Detail组件中导入useLocation：

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

2. 修改Detail组件代码：

function Detail() {
  const location = useLocation();
  console.log(location.state); // 此处可获取传递的用户对象c
  return(<h1>hi</h1>);
}

export default Detail;

其他实现需求的方法 #

• URL参数传递：适合传递简单数据（如用户ID），跳转时将ID拼入URL路径（如/detail/${c.id}），详情页通过useParams钩子获取ID后，再从接口或全局数据中拉取完整用户信息。
• 全局状态管理：使用Redux、Context API等工具将用户信息存入全局状态，详情页直接从全局状态读取目标用户数据，无需通过路由传递。
• 编程式导航传递状态：若使用编程式跳转而非Link标签，可通过useNavigate钩子传递状态：

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

// 组件内逻辑
const navigate = useNavigate();
const handleCardClick = () => {
  navigate('/detail', { state: c });
};

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