React useParams无法获取路由id参数 返回多属性对象该如何解决

问题原因 #

你出现这个问题的核心原因是导入react-router-dom组件时的别名配置完全错误：

1. App.js中错误将BrowserRouter别名成了Route，正确的导入应该是：

// 错误写法
import { BrowserRouter as Route, Switch } from "react-router-dom";
// 正确写法
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

并且你需要用Router组件包裹整个应用的路由内容，修改App.js的return部分：

function App() {
  return (
    <Router>
      <div className="App">
        <NavBar />
        <Switch>
          {/* 原有路由规则保持不变，注意调整路由顺序 */}
        </Switch>
      </div>
    </Router>
  );
}

2. 组件中错误将BrowserRouter别名成了Link，修改AuthCatShow.js的导入：

// 错误写法
import { BrowserRouter as Link, useParams } from "react-router-dom";
// 正确写法
import { Link, useParams } from "react-router-dom";

额外优化建议 #

你当前的路由顺序存在逻辑问题：/cats/:id是动态路由，会匹配所有/cats/xxx格式的路径，Switch组件会按从上到下的顺序匹配路由，匹配到第一个符合规则的就停止渲染。你现在把/cats/:id放在/cats/list、/cats/new前面，会导致访问后两个路径时，会被错误识别为id=list/id=new，匹配到AuthCatShow组件。需要调整路由顺序，把固定路径放在动态路径前面：

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/contact">
    <Contact />
  </Route>
  <Route path="/cats/list">
    <CatsList />
  </Route>
  <Route path="/cats/new">
    <CatsCreate />
  </Route>
  <Route path="/cats/edit/:id">
    <CatsUpdate />
  </Route>
  <Route path="/cats/:id">
    <AuthCatShow />
  </Route>
</Switch>

修改完成后useParams()就会正常返回仅包含路由参数的对象，更规范的写法可以直接解构拿到id：const { id } = useParams()。

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