Reactjs 写react路由器代码时的困惑

在以下不同的方式中，写作的区别是什么

1.）如第页所示

(三)

从'react router'导入{Route，IndexRoute}；
从“/TodoApp”导入TodoApp；
从“/TodoMain”导入TodoMain；
导出默认值(
);

只需看一下关于官方文件的部分。它解释了react路由器可以接受JSX或普通对象，每个对象都有两个必需属性：

path

和

component

。该普通对象的

indexRoute

属性被

组件“替换”（事实上并非如此）；而

childRoutes

与组件的

children

prop相同，该组件由封装到组件中的任何内容填充

那么

export default {
  path: '/',
  component: TodoApp,
  indexRoute: { component: TodoMain },
  childRoutes: []
};

配置可以用JSX的方式编写：

export default (
  <Route path="/" component={TodoApp}>
    <IndexRoute component={TodoMain} />
  </Route>
);

导出默认值(
);

在哪里导出默认值{来自？它是ES6模块导出语法，请参阅。

default

关键字意味着当您从该源导入时，无论您将导入分配给哪个变量，都将包含默认导出。非默认导出将组成一个对象，每个属性的键是导出的名称。您可以有多个

export

语句，并且只有一个

导出默认值

。

import { Route, IndexRoute } from 'react-router';

import TodoApp from './TodoApp';
import TodoMain from './TodoMain';

export default (
  <Route path="/" component={TodoApp}>
    <IndexRoute component={TodoMain} />
  </Route>
);

export default {
  path: '/',
  component: TodoApp,
  indexRoute: { component: TodoMain },
  childRoutes: []
};

export default (
  <Route path="/" component={TodoApp}>
    <IndexRoute component={TodoMain} />
  </Route>
);