React Router v6类组件中如何渲染路由函数（替代v5的render）

问题根源 #

React Router v6与v5的路由API差异明显：

• 废弃render属性，Route必须使用element属性，且值必须是React元素（不能直接传函数）。
• Routes组件自动处理精确匹配，无需再写exact属性。
• 类组件无法直接获取match对象，路由参数需通过useParams钩子获取。

修复方案 #

无需将整个组件重构为函数式，只需添加一个轻量的函数组件作为中间层处理参数传递：

1. 导入useParams钩子
2. 新增中间组件获取路由参数并匹配对应数据
3. 更新Route配置，移除冗余属性并替换为合法的element值

修改后的完整代码 #

import React, { Component } from 'react';
import { Route, Routes, useParams } from "react-router-dom";
import DogList from './DogList';
import DogDetails from './DogDetails';
import whiskey from './images/whiskey.jpg';
import tubby from "./images/tubby.jpg";
import hazel from "./images/hazel.jpg";
import './App.css';

// 中间层组件：获取路由参数并传递给DogDetails
const DogDetailsWrapper = (props) => {
  const { name } = useParams();
  const currentDog = props.dogs.find(
    dog => dog.name.toLowerCase() === name.toLowerCase()
  );
  return <DogDetails dog={currentDog} {...props} />;
};

class App extends Component {
  static defaultProps = {
    dogs: [ 
      {
        name: "Whiskey",
        age: 5,
        src: whiskey,
        facts: [
          "Whiskey loves eating popcorn.",
          "Whiskey is a terrible guard dog.",
          "Whiskey wants to cuddle with you!"
        ]
      },
      {
        name: "Hazel",
        age: 3,
        src: hazel,
        facts: [
          "Hazel has soooo much energy!",
          "Hazel is highly intelligent.",
          "Hazel loves people more than dogs."
        ]
      },
      {
        name: "Tubby",
        age: 4,
        src: tubby,
        facts: [
          "Tubby is not the brightest dog",
          "Tubby does not like walks or exercise.",
          "Tubby loves eating food."
        ]
      }
    ]
  };

  render() {
    return (
     <Routes>
       <Route 
         path='/dogs'
         element={<DogList dogs={this.props.dogs} />}
       />
     
       <Route path='/dogs/:name' element={<DogDetailsWrapper dogs={this.props.dogs} />} />
     </Routes>
    );
  }
}

export default App;

关键改动说明 #

• 移除所有Route上的exact属性，Routes会自动匹配最精准的路径。
• DogDetailsWrapper作为中间层，通过useParams获取URL中的name参数，匹配对应狗狗数据后传递给DogDetails。
• 将原render={getDog}替换为element={<DogDetailsWrapper dogs={this.props.dogs} />}，确保element的值是合法的React元素。

内容的提问来源于stack exchange，提问作者Omenaka Emmanuel