react-router-dom从v5升级到v6：Route传递props问题求助

在React Router v6里，Route组件的element属性不再支持像v5的render那样传递函数，它需要接收一个React元素实例，这就是你之前写法失效的核心原因。下面是几种正确的实现方式：

1. 直接传递自定义Props（推荐） #

直接在element中渲染目标组件，并把自定义props（比如你的api）传递过去：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Api from "./Api";
import ConfirmationPage from "./ConfirmationPage";

const api = new Api();
const App = () => {
  return (
    // ...其他页面结构
    <Router basename="/my-app">
      <Routes>
        <Route
          path="/complete"
          element={<ConfirmationPage api={api} />}
        />
        {/* 其他路由 */}
      </Routes>
    </Router>
  );
};

路由相关功能的替代方案 #

v6移除了v5中通过render函数传递的history、match等props，改用内置hooks来实现路由操作。比如在ConfirmationPage组件中：

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

const ConfirmationPage = ({ api }) => {
  // 替代history.push/back
  const navigate = useNavigate();
  // 获取当前路由信息
  const location = useLocation();
  // 获取路由参数
  const params = useParams();

  const handleGoHome = () => {
    navigate("/home");
  };

  // 使用api进行业务操作
  return (
    <div>
      <h1>确认页面</h1>
      <button onClick={handleGoHome}>返回首页</button>
    </div>
  );
};

2. 封装组件传递路由相关Props（仅兼容场景使用） #

如果你的组件依赖旧的路由props格式，可以封装一个中间组件，通过hooks获取路由信息后传递给目标组件：

import { useNavigate, useLocation, useParams } from "react-router-dom";
import ConfirmationPage from "./ConfirmationPage";

const ConfirmationPageWrapper = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const params = useParams();

  // 模拟v5的props结构传递
  const routeProps = {
    navigate,
    location,
    params,
    // 如需history对象，可自行封装：{ push: navigate, goBack: () => navigate(-1) }
  };

  return <ConfirmationPage {...routeProps} api={api} />;
};

// 路由中使用封装后的组件
<Route path="/complete" element={<ConfirmationPageWrapper />} />

关键说明 #

• v6的Routes/Route设计更偏向组件化，所有路由相关能力都通过hooks暴露，避免了props层层传递的问题
• 不要给element传递函数，必须传递JSX元素实例

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