Reactv6多路由组件配置教程

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

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

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

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

1. 路径冲突：两条 的 path 均为 '/'，Router 会优先匹配并渲染第一个（即 ），第二个（）被完全忽略；
2. 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