如何在 React Router v6 中正确配置多路由组件显示-js教程-PHP中文网

如何在 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（拼写错误且已废弃）。

✅ 正确做法如下：

Ink — React for interactive command-line apps.

Ink — 用 React 开发交互式命令行应用，使用 React组件构建丰富的终端 UI。

下载

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

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

export default App;

⚠️ 注意事项

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