React中useParams返回undefined问题求助

核心原因 #

useParams()只能在被<Route>直接渲染的组件或其嵌套组件中使用，你在包裹<Router>的App组件里调用它，组件不在路由上下文范围内，自然拿不到URL参数。

正确实现方式 #

把useParams()移到路由渲染的Form组件中：

1. 修改App组件：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Form from './Form';

function App() {
  return (
    <Router>
      <Routes>
        {/* 路径前加斜杠是标准写法 */}
        <Route path="/:id" element={<Form />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 在Form组件中获取参数：

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

function Form() {
  const { id } = useParams();
  console.log(id); // 访问localhost:3000/xhyz1时，会输出xhyz1
  return <div>当前ID：{id}</div>;
}

export default Form;

关于你之前尝试的说明 #

• 未解构id的写法const id = useParams();本质还是错误的，因为App不在路由上下文里，返回的对象始终为空。
• 给路径添加斜杠path="/:id"是正确的路由规范，但无法解决调用位置错误的核心问题。

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