React Router 孙路由组件渲染异常：访问孙路由路径时显示父路由组件

看起来你遇到的问题有点诡异：访问 /dashboard/employee/add 时，标签页的标题是正确的，但页面内容却是 EmployeeListPage 而不是预期的 EmployeeAddPage？我仔细扒了你的代码，发现问题的根源完全在 ./routes/dashboard/employee/add/index.tsx 这个文件里的两个低级错误：

1. 同一个文件里写了多个export default #

ES 模块的规则很明确：一个文件只能有一个默认导出。但你在这个文件里先后导出了两个默认组件：

// 第一个默认导出
export default function Index() {
  return <EmployeeAddPage />;
}

// 第二个默认导出——直接覆盖了前面的！
export default function EmployeeAddPage() {
  return (
    <div>
      <input name={"trajce"} value={"trajce"} />
      asdasd
      <p>asdasd</p>
    </div>
  )
}

虽然有些打包工具不会直接抛出语法错误，但这种写法会让模块的默认导出完全混乱。React Router 加载这个路由文件时，拿到的默认组件是最后定义的 EmployeeAddPage，但这里还有第二个问题...

2. 重复定义了EmployeeAddPage组件 #

你在文件开头已经从外部导入了 EmployeeAddPage：

import EmployeeAddPage from "~/pages/dashboard/employees/Add";

但紧接着又在同一个文件里重新定义了同名的 EmployeeAddPage 并设为默认导出——这直接把你导入的外部组件给覆盖了！更糟的是，原本应该作为路由页面的 Index 函数被后面的默认导出挤掉了，整个组件的导出逻辑彻底乱套。

怎么修复？ #

根据你的需求选下面其中一种方案就行：

方案A：用外部导入的EmployeeAddPage #

如果 ~/pages/dashboard/employees/Add 才是你真正要渲染的页面组件，那删掉自己定义的同名组件，只保留一个默认导出：

import EmployeeAddPage from "~/pages/dashboard/employees/Add";

export function meta() {
  return [
    { title: "Dashboard - Employee - Add - Index" },
    { name: "dashboard", content: "Index" },
  ];
}

// 只保留这一个默认导出
export default function Index() {
  return <EmployeeAddPage />;
}

方案B：直接用当前文件的组件 #

如果不需要外部的 EmployeeAddPage，那就删掉导入语句，只保留你自己写的组件（也可以保留Index函数返回它，二选一都可以）：

export function meta() {
  return [
    { title: "Dashboard - Employee - Add - Index" },
    { name: "dashboard", content: "Index" },
  ];
}

// 直接导出你写的组件作为页面
export default function EmployeeAddPage() {
  return (
    <div>
      <input name={"trajce"} value={"trajce"} />
      asdasd
      <p>asdasd</p>
    </div>
  )
}

为啥标签页标题是对的？ #

因为 meta() 是单独导出的函数，没有和组件导出冲突，所以 React Router 能正确读取它的返回值。这也说明路由的路径匹配是完全正常的——只是组件导出的逻辑崩了而已。

内容来源于stack exchange