本文详解 React Router v6 中动态路由参数、通配符 404 路由及 element 替代 Component 的正确用法，帮助开发者修复 /listings/:id 不匹配、NotFound 不生效等常见路由问题。

本文详解 react router v6 中动态路由参数、通配符 404 路由及 `element` 替代 `component` 的正确用法，帮助开发者修复 `/listings/:id` 不匹配、`notfound` 不生效等常见路由问题。

在 React Router v6 中，路由配置与 v5 有显著差异，尤其体现在路径语法、匹配逻辑和组件渲染方式上。你遇到的 path='/listings:id' 无法匹配 http://localhost:3000/listings/afsdf，以及 始终不生效的问题，正是由于未遵循 v6 的核心约定。

✅ 正确的动态参数路径写法：/listings/:id（不是 /listings:id）

v6 不支持将参数冒号紧贴路径段末尾（如 "/listings:id"），该写法会被当作字面路径字符串处理，仅匹配 http://localhost:3000/listings:id 这一精确 URL，而非带斜杠的动态路径。
✅ 正确写法是使用 /:paramName 作为独立路径段：

<route path="/listings/:id" element="{<ListingDetail"></route>} />

这样即可匹配：

• http://localhost:3000/listings/afsdf → params.id = "afsdf"
• http://localhost:3000/listings/123 → params.id = "123"

? 提示：在 ListingDetail 组件中，可通过 useParams() 获取 ID：

import { useParams } from 'react-router-dom';

const ListingDetail = () => {
  const { id } = useParams(); // ✅ 正确获取 :id
  return <div>Listing ID: {id}</div>;
};

✅ 404 通配路由必须显式声明 path="*"

v6 中，无 path 的 （如 ）不会自动成为兜底路由，它会被忽略或导致不可预期行为。
✅ 正确做法是使用 path="*" 表示“匹配所有未被前述路由捕获的路径”：

<route path="*" element="{<NotFound"></route>} />

⚠️ 注意顺序：path="*" 必须放在 内部最后，否则会提前拦截其他路由。

✅ 必须使用 element，而非 Component（非 Data Router 场景）

在基于 + 的传统客户端路由（即未使用 RouterProvider + createBrowserRouter）中，Component prop 已被弃用且存在性能隐患。官方明确指出：

Ink — React for interactive command-line apps.

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

下载

Using the Component prop on inside will de-optimize React's ability to reuse the created element across renders.

✅ 正确方式是使用 element 并传入 JSX 元素（注意括号）：

<route path="/" element="{<Home"></route>} />
<route path="/about" element="{<About"></route>} />
<route path="/listings/:id" element="{<ListingDetail"></route>} />
<route path="*" element="{<NotFound"></route>} />

❌ 错误示例（即使能运行，也不推荐）：

<route path="/" component="{Home}"></route> // ❌ 避免在普通 Routes 中使用

完整修正后的 App 路由配置

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './containers/Home';
import About from './containers/About';
import Contact from './containers/Contact';
import Listings from './containers/Listings';
import ListingDetail from './containers/ListingDetail';
import SignIn from './containers/SignIn';
import SignUp from './containers/SignUp';
import NotFound from './components/NotFound';
import Layout from "./hocs/Layout";

const App = () => {
  return (
    <router><layout><routes><route path="/" element="{<Home"></route>} />
          <route path="/about" element="{<About"></route>} />
          <route path="/contact" element="{<Contact"></route>} />
          <route path="/listings/:id" element="{<ListingDetail"></route>} />
          <route path="/listings" element="{<Listings"></route>} />
          <route path="/signin" element="{<SignIn"></route>} />
          <route path="/signup" element="{<SignUp"></route>} />
          <route path="*" element="{<NotFound"></route>} />
        </routes></layout></router>
  );
};

export default App;

? 验证要点总结

问题现象	根本原因	修复方案
/listings:id 不匹配 /listings/xxx	参数语法错误，v6 要求 /:id 独立为路径段	改为 path="/listings/:id"
NotFound 组件永不显示	缺少 path 属性，v6 不识别无路径的兜底路由	显式设置 path="*"
路由切换时组件重复挂载/性能下降	错误使用 Component prop，绕过 React 元素复用机制	统一改用 element={}

遵循以上三点，即可确保动态路由精准匹配、404 页面可靠兜底，并符合 React Router v6 的最佳实践与性能要求。