React Router v5升级至最新版：路由转换与props传递求助

项目当前使用 React Router v5.2.0，所有路由嵌套在 <Switch> 组件下，升级至最新版本时需将路由转换为 CompatRoute 格式。原v5路由代码如下：

<Route
  path={
    '/' +
    Constants.USER_ADMIN_TYPE +
    '/show-details/:name/:showId'
  }
  render={(props) => (
    <Admin
      userType={Constants.USER_ADMIN_TYPE}
      comp={
        <ShowDetails
          {...props}
          userType={
            Constants.USER_ADMIN_TYPE
          }
        />
      }
    />
  )}
/>

尝试转换后的代码无法渲染，且不清楚新版路由中如何传递props：

<CompatRoute
  path={
    '/' +
    Constants.USER_ADMIN_TYPE +
    '/show-details/:name/:showId'
  }
  component={
    <Admin
      userType={Constants.USER_ADMIN_TYPE}
      comp={
        <ShowDetails
          userType={
            Constants.USER_ADMIN_TYPE
          }
        />
      }
    />
  }
/>

错误原因 #

你出错的核心原因是**CompatRoute的component属性需要接收组件类/函数，而非直接传入JSX实例**，这和v5中Route的component属性规则一致。直接传JSX会导致路由无法正确渲染组件。

解决方案 #

方案1：使用CompatRoute的render属性（兼容v5写法，过渡用）

CompatRoute完全支持v5的render属性，只需将<Route>替换为<CompatRoute>，即可沿用原有逻辑传递路由props：

import { CompatRoute } from 'react-router-dom/compat';

<CompatRoute
  path={`/${Constants.USER_ADMIN_TYPE}/show-details/:name/:showId`}
  render={(props) => (
    <Admin
      userType={Constants.USER_ADMIN_TYPE}
      comp={
        <ShowDetails
          {...props} // 传递路由props（match、location、history等）
          userType={Constants.USER_ADMIN_TYPE}
        />
      }
    />
  )}
/>

方案2：改用CompatRoute的element属性（贴合v6语法，推荐）

React Router v6及兼容层推荐使用element属性传递JSX，此时路由props不再通过组件参数传递，需通过useParams、useLocation等hooks获取：

1. 转换后的路由代码：

import { CompatRoute } from 'react-router-dom/compat';

<CompatRoute
  path={`/${Constants.USER_ADMIN_TYPE}/show-details/:name/:showId`}
  element={
    <Admin
      userType={Constants.USER_ADMIN_TYPE}
      comp={<ShowDetails userType={Constants.USER_ADMIN_TYPE} />}
    />
  }
/>

2. 在ShowDetails组件中获取路由参数：

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

function ShowDetails({ userType }) {
  // 获取路由参数
  const params = useParams(); // { name: 'xxx', showId: 'xxx' }
  const location = useLocation();
  const navigate = useNavigate();

  // 后续逻辑使用这些hooks返回的值即可
  return (
    // 组件内容
  );
}

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