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 (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/layout" element={<Layout />} />
      {/* 可选：添加重定向或 404 */}
      <Route path="*" element={<div>Page Not Found</div>} />
    </Routes>
  );
}

export default App;

⚠️ 注意事项

• element 必须是已执行的 JSX 元素（如 ），不可传入组件引用（如 Home）或带 props 的函数调用（如 Home({foo: 'bar'})）；
• 若需向组件传递 props，应使用内联函数或自定义 element 包装（但注意避免重复渲染）：

  <Route path="/home" element={<Home title="Welcome" />} />

• exact 属性在 v6 中已被移除，路径匹配默认为精确匹配（即 / 不会匹配 /layout），无需额外声明；
• 确保 react-router-dom 版本 ≥ 6.0.0（推荐使用最新稳定版），可通过 npm list react-router-dom 验证；
• 若需嵌套路由（如 Layout 作为布局容器包裹子页面），应使用 Outlet 配合 element 中的嵌套结构（非本文重点，但属常见进阶需求）。

? 排查建议

• 检查浏览器地址栏 URL 是否与目标路由路径一致（例如访问 http://localhost:3000/layout 才能触发 Layout 渲染）；
• 使用 React DevTools 查看 Router 组件树，确认 是否被正确挂载；
• 清理 node_modules 和 package-lock.json 后重装依赖，排除版本残留干扰。

遵循以上规范，即可确保多个路由组件在 v6 中稳定、可预测地渲染。

今天关于《Reactv6多路由组件配置教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！