3

我正在使用 webpack 2 / 代码拆分，所以我的路线是这样的

import App from './components/App';
import Portal from './components/portal/Portal';

const componentRoutes = {
  component: App,
  path: '/',
  indexRoute: { component: Portal },
  childRoutes: [
    {
      path: 'login',
      getComponent(location, cb) {
        System.import('./components/login/Login')
          .then(module => cb(null, module.default));
      }
    },
    {
      path: 'home/:id',
      getComponent(location, cb) {
        System.import('./components/homepage/HomeContainer')
          .then(module => cb(null, module.default));
      }
    },
    {
      path: 'home/:id/assessments',
      getComponent(location, cb) {
        System.import('./components/assessment/AssessmentContainer')
          .then(module => cb(null, module.default));
      } 
    },
    {
      path: 'home/:id/manage_classes',
      getComponent(location, cb) {
        System.import('./components/manageClasses/manageClassesContainer')
          .then(module => cb(null, module.default));
      }
    }
  ]
};

但我想像这样嵌套我的路线：

import Login from './components/login/Login';
import HomeContainer from  './components/homepage/HomeContainer';
import Unit from './components/homepage/Units'
import AssessmentContainer from './components/assessment/AssessmentContainer';
import ManageClassesContainer from './components/manageClasses/manageClassesContainer';

const componentRoutes = (
  <Route path='/' component={App}>
    <Route path='login' component={Login} />

    <Route path='home/:id' component={HomeContainer}>
      <IndexRoute component={Unit} />
      <Route path='home/:id/assessments' component={AssessmentContainer} />
      <Route path='home/:id/manage_classes' component={ManageClassesContainer} />
    </Route>
  </Route>
);

你如何在嵌套路由数组中有嵌套路由？当我导航到时，home/:id我不想丢失所有 JSXHomeContainer提供的东西，我只想调用 use{props.children}来渲染子路由。当您使用代码拆分时，您不能使用 JSX，这就是我尝试重构的原因。

4

0 回答 0