React Router ChildRoutes配置失效，routes.map不是函数问题求助

看你的描述，应该是React Router版本适配的问题——旧版本（比如v3）支持直接传入对象格式的路由配置，但v4及以上的版本已经彻底改用组件声明式的路由结构，所以它会把你传入的routes对象当成数组去调用map，自然就抛出这个错误了。下面给你两种可行的解决方案：

方案一：用react-router-config兼容原有对象式配置 #

如果你想保留原来的路由配置结构，这个工具包可以帮你适配新版本的React Router：

1. 先安装依赖：

npm install react-router-config react-router-dom history
# 或者用yarn
yarn add react-router-config react-router-dom history

2. 调整路由配置的字段名：
   把你原配置里的childRoutes改成routes（这是react-router-config要求的子路由字段名）：

const routes = {
  component: Base,
  routes: [ // 替换原来的childRoutes
    {
      path: '/home',
      getComponent: (location, callback) => {
        if (Auth.isAuthenticated()) {
          // 你的异步加载逻辑，比如动态import组件
          import('./Home').then(module => callback(null, module.default));
        } else {
          // 未授权时的处理，比如跳转到登录页
          callback(null, Login);
        }
      }
    }
    // 其他子路由配置...
  ]
};

3. 修改渲染代码：
   用renderRoutes方法把对象配置转换成组件结构：

import { renderRoutes } from 'react-router-config';
import { Router } from 'react-router-dom';
import { createHashHistory } from 'history';

// 创建hashHistory（和你原来的用法一致）
const hashHistory = createHashHistory();

ReactDom.render(
  <Router history={hashHistory}>
    {renderRoutes(routes)}
  </Router>,
  document.getElementById('react-app')
);

方案二：改用React Router v4+原生组件式写法（更推荐） #

这是官方推荐的写法，更贴合React的组件思维，后续维护也更清晰：

1. 导入所需组件：

import { Router, Route, Switch, Redirect, Suspense } from 'react-router-dom';
import { createHashHistory } from 'history';
import Base from './Base';
// 用React.lazy实现组件懒加载，替代原来的getComponent
const Home = React.lazy(() => import('./Home'));
const Login = React.lazy(() => import('./Login'));

2. 编写渲染逻辑：

const hashHistory = createHashHistory();

ReactDom.render(
  <Router history={hashHistory}>
    {/* Base作为布局组件，内部通过children渲染子路由内容 */}
    <Base>
      <Switch>
        <Route path="/home" render={() => {
          // 在这里处理你的权限校验逻辑
          if (Auth.isAuthenticated()) {
            // Suspense用于懒加载时的loading占位
            return <Suspense fallback={<div>加载中...</div>}><Home /></Suspense>;
          } else {
            // 未授权则跳转到登录页
            return <Redirect to="/login" />;
          }
        }} />
        <Route path="/login" render={() => (
          <Suspense fallback={<div>加载中...</div>}><Login /></Suspense>
        )} />
        {/* 默认路由重定向到首页 */}
        <Route path="/" exact render={() => <Redirect to="/home" />} />
      </Switch>
    </Base>
  </Router>,
  document.getElementById('react-app')
);

3. 确保Base组件支持渲染子内容：
   在你的Base组件里要记得渲染children属性，这样子路由的内容才能显示在布局里：

const Base = ({ children }) => {
  return (
    <div className="app-layout">
      {/* 这里放你的导航栏、侧边栏等公共元素 */}
      <header>我的导航</header>
      {/* 子路由内容会渲染在这里 */}
      <main>{children}</main>
    </div>
  );
};

总结 #

如果只是想快速适配原有代码，选方案一；如果想长期维护项目，建议用方案二，符合React Router的最新设计理念，也更容易让其他开发者理解你的路由结构。

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