react-router v6中传递动态组件至Route的element属性报错求助

问题核心 #

你遇到的错误根源是React Router v6 完全重构了 Route 组件的 API，和旧版本逻辑差异极大：

1. element 属性必须接收 React 元素（如 <DogDetails />），不能直接传入函数
2. 不再提供 match.params 对象，需通过 useParams 钩子获取 URL 参数
3. Route 无需再写 exact 属性，Routes 组件会自动匹配最精确的路由

具体修改方案 #

方案1：将 DogDetails 改为函数组件（推荐）

函数组件可直接使用 React Router v6 的钩子，代码更简洁直观：

首先修改 DogDetails 组件：

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

function DogDetails({ dogs }) {
  // 从 URL 路径中提取 name 参数
  const { name } = useParams();
  
  // 匹配对应的狗狗数据
  const currentDog = dogs.find(
    dog => dog.name.toLowerCase() === name.toLowerCase()
  );

  // 处理未找到狗狗的边界情况
  if (!currentDog) {
    return <h1>狗狗不存在</h1>;
  }

  return <h1>{currentDog.name}</h1>;
}

然后更新 App 组件的路由配置：

render() {
  return (
    <div className="App">
      <Navbar />
      <Routes>
        {/* v6 自动精确匹配，移除 exact 属性 */}
        <Route path="/dogs" element={<DogList dogs={this.props.dogs} />} />
        {/* 直接传入 DogDetails 元素，将狗狗列表作为 props 传递 */}
        <Route path="/dogs/:name" element={<DogDetails dogs={this.props.dogs} />} />
        <Route path="*" element={<h1>Not Found</h1>} />
      </Routes>
    </div>
  );
}

方案2：保留类组件版 DogDetails

如果必须使用类组件，需要写一个包装函数组件来传递 URL 参数（类组件无法直接使用 hooks）：

首先创建包装组件：

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

function DogDetailsWrapper({ dogs }) {
  const params = useParams();
  return <DogDetails params={params} dogs={dogs} />;
}

然后修改类组件版的 DogDetails：

class DogDetails extends Component {
  render() {
    const { name } = this.props.params;
    const currentDog = this.props.dogs.find(
      dog => dog.name.toLowerCase() === name.toLowerCase()
    );

    if (!currentDog) {
      return <h1>狗狗不存在</h1>;
    }

    return <h1>{currentDog.name}</h1>;
  }
}

最后更新 App 中的路由：

<Route path="/dogs/:name" element={<DogDetailsWrapper dogs={this.props.dogs} />} />

原代码无效原因 #

旧版本 React Router 支持通过 render prop 传递函数动态生成组件，但 v6 彻底移除了该模式，要求 element 必须是已实例化的 React 元素。你之前直接传入 getDog 函数，要么因不是 React 元素导致路由无内容，要么调用方式错误触发"函数作为子元素无效"的警告。

内容的提问来源于stack exchange，提问作者Sam Gardner