当前位置：首页 > 文章列表 > 文章 > 前端 > Reactv6多路由组件配置教程

Reactv6多路由组件配置教程

2026-04-13 12:27:47 0浏览收藏

React Router v6 彻底重构了路由配置方式，废弃了 v5 中的 `component`/`Component` 属性和 `exact` 选项，强制要求使用 `element` 属性传入已渲染的 JSX 元素，并强调路径唯一性——重复路径（如多个 `'/'`）会导致仅首个路由生效，其余组件彻底无法显示；本文手把手教你避开常见坑点，从正确结构、嵌套路由支持、props 传递技巧到版本验证与调试建议全覆盖，助你快速适配 v6 并实现多组件稳定、精准的路由渲染。

如何在 React Router v6 中正确配置多路由组件显示

React Router v6 不再支持 component 或 Component 属性，必须使用 element 属性传入 JSX 元素；同时，所有路由路径必须唯一，否则仅首个匹配路由生效，导致组件无法正常渲染。

React Router v6 不再支持 `component` 或 `Component` 属性，必须使用 `element` 属性传入 JSX 元素；同时，所有路由路径必须唯一，否则仅首个匹配路由生效，导致组件无法正常渲染。

在 React Router v6 中，路由配置方式发生了根本性变化：不再接受 component/Component 作为 prop，也不再支持 exact 属性。你提供的代码中存在两个关键错误，直接导致 Layout 和 Home 组件均无法按预期显示：

路径冲突：两条的 path 均为 '/'，Router 会优先匹配并渲染第一个（即），第二个（）被完全忽略；
API 误用：v6 要求使用 element（接收一个已渲染的 JSX 元素），而非 v5 的 component（接收组件类型）或 Component（拼写错误且已废弃）。

✅ 正确做法如下：

✅ 正确配置多路由（推荐结构）

// App.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';

import Layout from './components/Layout';
import Home from './components/Home';

function App() {
  return (
    
      } />
      } />
      {/* 可选：添加重定向或 404 */}
      Page Not Found

} /> ); } export default App;

⚠️ 注意事项

element 必须是已执行的 JSX 元素（如），不可传入组件引用（如 Home）或带 props 的函数调用（如 Home({foo: 'bar'})）；
若需向组件传递 props，应使用内联函数或自定义 element 包装（但注意避免重复渲染）：
```
} />
```
exact 属性在 v6 中已被移除，路径匹配默认为精确匹配（即 / 不会匹配 /layout），无需额外声明；
确保 react-router-dom 版本 ≥ 6.0.0（推荐使用最新稳定版），可通过 npm list react-router-dom 验证；
若需嵌套路由（如 Layout 作为布局容器包裹子页面），应使用 Outlet 配合 element 中的嵌套结构（非本文重点，但属常见进阶需求）。