如何将React Router路由配置中带子路由的const组件转为类组件？

没问题，我帮你把那些带子路由的函数组件转成类组件，其实核心逻辑完全不变，只是把组件的写法换成类的形式就行，我给你一步步演示：

函数组件里接收的routes props，在类组件里可以通过this.props.routes访问，渲染嵌套路由的逻辑完全复用原来的写法，只需要把函数组件的结构改成类组件的标准格式。

假设原函数组件是这样的：

const Tacos = ({ routes }) => (
  <div>
    <h2>Tacos</h2>
    <ul>
      <li><Link to="/tacos/bus">Bus</Link></li>
      <li><Link to="/tacos/cart">Cart</Link></li>
    </ul>
    {routes.map((route, i) => (
      <RouteWithSubRoutes key={i} {...route} />
    ))}
  </div>
);

转成类组件后是这样的：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Tacos extends Component {
  render() {
    // 从props中解构出routes，或者直接用this.props.routes
    const { routes } = this.props;
    return (
      <div>
        <h2>Tacos</h2>
        <ul>
          <li><Link to="/tacos/bus">Bus</Link></li>
          <li><Link to="/tacos/cart">Cart</Link></li>
        </ul>
        {routes.map((route, i) => (
          <RouteWithSubRoutes key={i} {...route} />
        ))}
      </div>
    );
  }
}

export default Tacos;

• 类组件需要继承React.Component，并实现render()方法返回JSX
• 原来函数组件的props参数，在类组件里通过this.props访问，你可以选择解构或者直接使用
• 嵌套路由的map遍历、RouteWithSubRoutes的使用完全和原代码一致，不需要修改
• 路由配置数组不需要任何改动，因为路由配置只关心组件的引用，不管它是函数组件还是类组件

比如原Burger组件：

const Burger = () => <h3>Burger</h3>;

转成类组件：

class Burger extends Component {
  render() {
    return <h3>Burger</h3>;
  }
}

这样转换后，整个路由系统的运行逻辑和原来完全一样，只是组件的定义方式换成了你想要的类组件形式。

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