React Router Dom v6中match属性的替代方案及传参报错解决

React Router DOM v6 完全重构了路由的写法逻辑，Route 的 element 属性不再支持接收路由 props（match、location、history 这类都被移除了），这就是你遇到类型错误的核心原因——LayoutReport 组件并没有定义 match 这个 props，而且 v6 也不会再自动给组件注入这类路由相关的值。

你的代码问题所在 #

在 v5 里，Route 可以通过 render 函数拿到 match 等路由参数，但 v6 要求 element 必须是直接的 React 元素，不能是返回元素的函数，你当前的写法本身就不符合 v6 的规范。

修复方案 #

1. 修正 Route 的写法
   把 Route 的 element 改成直接传递组件，去掉外层的函数：

   <Route
     path="reports/*"
     element={
       <FilterBarProvider>
         <LayoutReport />
       </FilterBarProvider>
     }
   />
   

2. 在 LayoutReport 内部获取原 match 对应的信息
   v6 用一系列 hooks 替代了原来的 match 对象，根据你实际需要的信息选择对应的 hook：

   • 要获取路由参数：用 useParams()

     import { useParams } from 'react-router-dom';
     
     function LayoutReport() {
       const params = useParams();
       // 比如原来用 match.params.xxx，现在直接用 params.xxx
     }
     

   • 要判断当前路由是否匹配某路径：用 useMatch()

     import { useMatch } from 'react-router-dom';
     
     function LayoutReport() {
       const match = useMatch("reports/*");
       // 这个 match 对象包含 path、pathname、params 等信息，和 v5 的 match 功能一致
     }
     

   • 要获取当前页面的 location 信息：用 useLocation()
   • 要实现页面跳转：用 useNavigate()（替代 v5 里的 history 对象）

设计思路变化 #

v6 采用 hooks-first 的设计，把路由相关的状态和操作都通过 hooks 暴露，不再依赖 props 注入，这样组件的复用性和灵活性更强，也更贴合 React 函数式组件的开发模式。

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