如何在React Router 3中在主应用外部配置路由？

嘿，要让组件不嵌套在App里其实很简单，核心思路就是把外部组件的路由配置和App的路由配置放在同一层级，而不是作为App的childRoutes。

具体修改步骤 #

1. 把原来的单一路由对象改成路由数组，数组里同时包含App的原有路由和外部组件的路由：

export default [
  // 保留原来的App相关路由（嵌套结构不变）
  {
    component: App,
    path: '/',
    indexRoute: { component: Login },
    childRoutes: [
      {
        path: 'dashboard',
        getComponent(location, cb) {
          System.import('./components/dashboard/Dashboard')
            .then(module => cb(null, checkAuth(module.default)));
        }
      },
      // 其他原来的子路由继续放在这里
    ]
  },
  // 外部组件的独立路由（和App平级，不会嵌套在App里）
  {
    path: '/external-page',
    // 同样支持按需加载和权限验证
    getComponent(location, cb) {
      System.import('./components/ExternalPage')
        .then(module => cb(null, module.default));
      // 如果需要权限验证，直接复用你的checkAuth逻辑：cb(null, checkAuth(module.default))
    }
    // 也可以给外部路由添加自己的子路由，它们会嵌套在ExternalPage里，和App无关
    // childRoutes: [...]
  }
];

2. 确保你的根路由渲染部分接受这个数组作为routes属性：

import { Router, browserHistory } from 'react-router';
import routes from './routes';

ReactDOM.render(
  <Router history={browserHistory} routes={routes} />,
  document.getElementById('root')
);

原理说明 #

在React Router 3中，路由数组里的每一项都是独立的根路由：

• 当访问/external-page时，Router会匹配到这个平级路由，直接渲染ExternalPage组件，完全不会经过App组件；
• 而访问/、/dashboard等路径时，依然会渲染App组件，并通过this.props.children渲染对应的嵌套子组件。

这种方式特别适合需要独立布局、完全脱离App公共结构（比如导航栏、侧边栏）的页面，比如独立的登录页、404页等。

额外提示 #

如果你的外部路由需要单独的权限验证、indexRoute或者自己的子路由，都可以像配置App路由一样操作，它们的作用范围只限于当前路由本身，不会影响App的嵌套结构。

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