React项目react-router-dom v6匹配/update/:id路由报错解决

你使用的是v6版本的react-router-dom，该版本和v5语法存在破坏性变更，你的代码完全沿用了v5的旧写法，直接触发报错：

• v6版本的<Route>组件移除了render、component属性，仅支持通过element属性传入要渲染的React节点，你给/update/:id配置的render属性不会被识别，路由匹配后找不到可渲染内容，就会出现控制台提示的空页面错误。
• v6版本默认所有路由都是精确匹配，不再需要手动加exact属性。
• v6版本不会自动给类组件注入match、location、history这类路由props，直接在类组件里访问this.props.match会拿到undefined，自然读不到路由参数。
• 额外问题：导航栏里的Update跳转链接写的是to="/update"，路径没有带动态id段，点击后无法匹配/update/:id规则，也会导致空白。

1. 给类组件封装路由注入HOC #

v6没有提供v5里的withRouter高阶组件，需要自己基于路由hooks封装一层，把路由参数注入到类组件的props里。你可以把下面的代码加到RestaurantUpdate.js顶部：

import { useParams, useNavigate, useLocation } from 'react-router-dom';

const withRouter = (WrappedComponent) => {
  return (props) => {
    const params = useParams();
    const navigate = useNavigate();
    const location = useLocation();
    return (
      <WrappedComponent
        {...props}
        match={{ params }}
        navigate={navigate}
        location={location}
      />
    );
  };
};

然后修改RestaurantUpdate.js的导出语句，用HOC包裹组件：

export default withRouter(RestaurantUpdate);

改完后组件里原有的this.props.match.params.id写法就可以正常拿到路由参数了。

2. 修改App.js里的路由配置 #

把原来/update/:id的render写法替换成v6要求的element写法，同时删掉首页路由多余的exact属性：

<Routes>
  <Route path="/list" element={<RestaurantList />} />
  <Route path="/create" element={<RestaurantCreate />} />
  <Route path="/search" element={<RestaurantSearch />} />
  {/* 替换原来的render写法 */}
  <Route path="/update/:id" element={<RestaurantUpdate />} />
  <Route path="/details" element={<RestaurantDetail />} />
  {/* 删掉多余的exact */}
  <Route path="/" element={<Home />} />
</Routes>

3. 修正导航栏的Update跳转链接 #

把导航栏里指向Update的Link地址补上动态id参数，比如要跳转到id为1的编辑页就改成：

<Nav.Link href="#link">
  <Link to="/update/1" style={{ color: 'yellow', textDecoration: 'inherit' }}>Update</Link>
</Nav.Link>

实际业务里可以根据需求动态拼接要编辑的餐厅id即可。

改完后重启项目访问/update/1，页面会正常渲染Update标题，控制台也能正确打印出参数id的值1。

内容的提问来源于stack exchange，提问作者Anish Kumar Mohanty