React路由写法变更咨询：从传统Route组件到对象式路由定义

最近我帮团队把一堆分散在JSX里的React路由写法，改成了更易维护的对象式路由定义，这里分享下具体的实现过程和优势。

原来的路由写法 #

之前我们的路由都是直接在Switch里写Route组件，像这样：

<Route path="/loggingin" component={LoggingIn}/>
<Route path="/forgottenpassword" component={ForgottenPassword}/>
<Route path="/passwordreset" component={PasswordReset}/>
<Route path="/changepassword" component={ChangePassword}/>
// ... 还有几十条类似的路由项

这种写法在路由少的时候还好，但路由一多就显得杂乱，而且要改权限、加配置的时候得逐个找，效率很低。

改造后的对象式路由定义 #

我们用对象来集中管理所有路由配置，还按模块拆分了路由，比如登录相关、表单相关，最后再合并成主路由表：

首先定义路由的类型（TypeScript环境下），方便类型校验：

// 定义路由配置的类型
type TypeRoutes = Record<string, {
  pageComponent: React.ComponentType;
  exact?: boolean;
  // 可以根据需求扩展，比如authRequired、pageTitle等
}>;

// 拆分登录模块的路由
const loginRoutes: TypeRoutes = {
  '/loggingin': { pageComponent: LoggingIn },
  '/forgottenpassword': { pageComponent: ForgottenPassword },
  '/passwordreset': { pageComponent: PasswordReset },
  '/changepassword': { pageComponent: ChangePassword }
};

// 表单模块的路由（示例）
const formRoutes: TypeRoutes = {
  // 这里放表单相关的路由配置，比如'/submit-form': { ... }
};

// 合并所有路由，包括未登录可访问的主页面
export const mainRoutes: TypeRoutes = {
  ...loginRoutes,
  ...formRoutes,
  // 首页路由，设置exact匹配
  '/': { pageComponent: PageHome, exact: true },
  // ... 其他主路由项
};

把对象路由转换成React Router组件 #

接下来需要一个简单的函数，遍历这个路由对象，生成对应的Route组件：

import { Route, Switch, BrowserRouter } from 'react-router-dom';

// 渲染路由的工具函数
function renderRoutes(routes: TypeRoutes) {
  return Object.entries(routes).map(([path, config]) => (
    <Route
      key={path}
      path={path}
      exact={config.exact ?? false}
      component={config.pageComponent}
    />
  ));
}

// 在App中使用路由
function AppRouter() {
  return (
    <BrowserRouter>
      <Switch>
        {renderRoutes(mainRoutes)}
      </Switch>
    </BrowserRouter>
  );
}

额外优势：更灵活的路由控制 #

对象式路由最大的好处是扩展性强，比如要加路由权限控制，只需要在路由类型里加个authRequired字段，然后在渲染函数里做判断：

// 扩展路由类型，新增权限字段
type TypeRoutes = Record<string, {
  pageComponent: React.ComponentType;
  exact?: boolean;
  authRequired?: boolean; // 标记是否需要登录才能访问
}>;

// 修改renderRoutes函数，加入权限校验
function renderRoutes(routes: TypeRoutes) {
  const isAuthenticated = useAuth(); // 假设这是项目里获取登录状态的自定义Hook

  return Object.entries(routes).map(([path, config]) => {
    // 如果需要登录但未登录，重定向到登录页
    if (config.authRequired && !isAuthenticated) {
      return <Redirect key={path} to="/loggingin" />;
    }

    return (
      <Route
        key={path}
        path={path}
        exact={config.exact ?? false}
        component={config.pageComponent}
      />
    );
  });
}

这种方式把路由配置和渲染逻辑分开，路由多的时候维护起来特别方便，团队成员也能快速找到对应模块的路由配置，效率提升不少。

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