如何在React Router中通过map遍历路由对象配置Route组件

核心问题修正 #

你的代码需要调整三个关键细节：

1. Route组件的element属性必须接收JSX元素，而非组件引用
2. React列表渲染必须添加唯一key属性
3. React Router v6已移除exact属性，无需再配置

步骤1：调整路由数组（可选但推荐） #

把404路由也加入数组，同时移除无用的exact字段：

export const routes = [
  { path: '/about', element: About },
  { path: '/posts', element: Posts },
  { path: '/posts/:id', element: PostDetails },
  { path: '*', element: Error } // 新增404路由
];

步骤2：编写正确的AppRouter组件 #

const AppRouter = () => {
  return (
    <Routes>
      {routes.map(route => (
        <Route
          key={route.path} // 唯一key，React列表渲染必填
          path={route.path}
          element={<route.element />} // 将组件引用转为JSX元素
        />
      ))}
    </Routes>
  );
};

export default AppRouter;

关键说明 #

• key属性：用路由path作为key是安全的，因为路由路径本身具有唯一性，可避免React渲染警告。
• element属性处理：路由数组中存储的是组件引用（如About），而Route要求传入实例化的JSX（如<About />），因此需要用<route.element />的方式渲染组件。
• exact属性：React Router v6的路由匹配默认是精确匹配，仅当路径包含*通配符时才会模糊匹配，所以exact属性已被废弃，无需配置。

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