[React类式组件路由配置]React类式组件路由配置

import React from 'react';
import { Route, Switch } from 'react-router-dom';
 
// 假设有一个类式组件
import HomePage from '../components/HomePage';
import AboutPage from '../components/AboutPage';
import NotFoundPage from '../components/NotFoundPage';
 
// 使用一个单独的类来配置路由
export default class AppRoutes extends React.Component {
  render() {
    return (
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route component={NotFoundPage} />
      </Switch>
    );
  }
}

这个例子展示了如何在React中使用类式组件来配置路由。Switch组件确保只渲染第一个匹配的Route。exact属性确保HomePage只在路径为/时渲染。如果没有匹配的路由，NotFoundPage将被渲染。这个配置方法是React应用中常见的做法，特别是在使用React Router库时。