路由和目录

路由是基于著名的 React Router 库开发。 React 客户端带有单一的入口文件 src/routing.ts 用来定义能放入主菜单的界面：

menuItems.push({
  pathPattern: '/pets', // 路径 pattern 也可以带一些参数，比如：/pets/:petId?
  menuLink: '/pest',
  component: PetBrowser, // 将被渲染的组件，需要在 `routes.ts` 引入
  caption: 'Pets' // 菜单项标题
});

src/App.tsx 文件包含 Switch 组件，可以根据 URL 路径渲染界面：

  <Switch>
    <Route exact={true} path="/" component={HomePage}/>
  {collectRouteItems(menuItems).map(route => (  // 从主菜单和子菜单获取所有路由
  <Route key={route.pathPattern} path={route.pathPattern} component={route.component}/>
    )}
  </Switch>

如需创建一个结构化的菜单，可以手动在 Switch 组件中添加 Route 或者对 routes.ts 里面的定义的结构做定制化修改。

子菜单

创建子菜单可以在 routes.ts 里面创建 SubMenu 实例，然后添加到 menuItems。

// 这是在 UserSettings 菜单下想看到的菜单项
const userProfileRouteItem = {
  pathPattern: "/profile",
  menuLink: "/profile",
  component: UserProfile,
  caption: "UserProfile"
};

// 子菜单
const userSettingsSubMenu = {
  caption: 'UserSettings', // 在 src/i18n/en.json 内添加 router.UserSettings 键值，这样有正确的翻译。
  items: [userProfileRouteItem]};

// 菜单配置中加入子菜单
menuItems.push(userSettingsSubMenu);

子菜单可以无限嵌套。一个子菜单可以用在另一个里面。