Outlet

outlet 用于标注应用程序中的显示位置，在这个位置可以根据匹配到的路由渲染不同的内容。与使用路由相比，使用 outlet 能减少编写样板代码，将多个路由关联到同一个 outlet 下，以便更自然、更准确的描述应用程序的输出结构。

考虑一个经典的应用程序布局，其中包括一个左侧菜单和主内容视图，在主内容视图右侧有一个根据路由变化的菜单栏：

-------------------------------------------------------------------
|        |                                            |           |
|        |                                            |           |
|        |                                            |           |
|        |                                            |           |
|        |                                            |           |
|  menu  |                   main                     | side-menu |
|        |                                            |           |
|        |                                            |           |
|        |                                            |           |
|        |                                            |           |
|        |                                            |           |
-------------------------------------------------------------------

以下的路由配置将所有的主页面指向显示主内容的 outlet，将 widget 指向显示 side-menu 的 outlet。便可以构建出这样一个应用程序，它始终根据路由动态渲染主内容区，也会根据右侧菜单栏中 widget 路由的所有子路由动态渲染主内容区。

const routes = [
    {
        id: 'landing',
        path: '/',
        outlet: 'main',
        defaultRoute: true
    },
    {
        id: 'widget',
        path: 'widget/{widget}',
        outlet: 'side-menu',
        children: [
            {
                id: 'tests',
                path: 'tests',
                outlet: 'main'
            },
            {
                id: 'overview',
                path: 'overview',
                outlet: 'main'
            },
            {
                id: 'example'
                path: 'example/{example}',
                outlet: 'main'
            }
        ]
    }
];

在上面的路由配置中，定义了两个 outlet，main 和 side-menu，下面显示了使用这两个 outlet 的简化版应用程序布局。默认情况下，Outlet 将会渲染 key 值与 outlet 下的路由 id 匹配的路由，如本例中的 main。如果为 Outlet 传入的是一个函数，则与 outlet 中的 任一 路由匹配时，都会渲染。

import { create, tsx } from '@dojo/framework/core/vdom';
import Outlet from '@dojo/framework/routing/Outlet';

import Menu from './Menu';
import SideMenu from './SideMenu';
import Landing from './Landing';
import Tests from './Tests';
import Example from './Example';

const factory = create();

const App = factory(function App() {
    return (
        <div>
            <Menu />
            <main>
                <div>
                    <Outlet id="main">
                        {{
                            landing: <Landing />,
                            tests: <Tests />,
                            example: ({ params: { example }}) => <Example example={example}/>,
                            overview: <Example example="overview"/>
                        }}
                    </Outlet>
                </div>
                <div>
                    <Outlet id="side-menu">
                        {({ params: { widget }}) => <SideMenu widget={widget}>}
                    </Outlet>
                </div>
            </main>
        </div>
    );
});

App 的节点结构看起来很直观，简洁的描述出实际视觉输出，只是有一小处重复，即仍然需要在不同路由中重复使用 Example 部件。这可以通过使用 matcher 属性来覆盖默认的路由匹配规则来解决。matcher 会接收 defaultMatches 和 matchDetailsMap 两个参数，以便自定义匹配策略。在下面最后一个示例中，将重复使用的 Example 合并为一个新 key，即 details，但在路由定义中并不存在。如果不覆写默认匹配，让匹配到 example 或 overview 路由时将其设置为 true，则此 outlet 永远不会匹配到 details。最后，在 details 渲染函数中，将 example 属性的默认值设置为 overview，以与之前的行为保持一致。

import { create, tsx } from '@dojo/framework/core/vdom';
import Outlet from '@dojo/framework/routing/Outlet';

import Menu from './Menu';
import SideMenu from './SideMenu';
import Landing from './Landing';
import Tests from './Tests';
import Example from './Example';

const factory = create();

const App = factory(function App() {
    return (
        <div>
            <Menu />
            <main>
                <div>
                    <Outlet id="main" matcher={(defaultMatches, matchDetailsMap) => {
                        defaultMatches.details = matchDetailsMap.has('example') || matchDetailsMap.has('overview');
                        return defaultMatches;
                    }}>
                        {{
                            landing: <Landing />,
                            tests: <Tests />,
                            details: ({ params: { example = "overview" }}) => <Example example={example}/>,
                        }}
                    </Outlet>
                </div>
                <div>
                    <Outlet id="side-menu">
                        {({ params: { widget }}) => <SideMenu widget={widget}>}
                    </Outlet>
                </div>
            </main>
        </div>
    );
});