使用 MatchDetails

注意：所有示例都假设正在使用默认的 HashHistory 历史管理器。

• queryParams: { [index: string]: string }: 获取匹配路由的查询参数。

• 如果 URL 路径为 /#home?foo=bar&baz=42，那么 queryParams 对象将如下所示：

{
    foo: 'bar',
    baz: '42'
}

params

• params: { [index: string]: string }: 匹配路由的路径参数

export default [
    {
        id: 'home',
        path: 'home/{page}',
        outlet: 'home'
    }
];

• 如果 URL 路径为 /#home/about，params 对象将如下所示：

• isExact(): boolean: 一个函数，用于指出路由是否与路径完全匹配。这可用于按条件渲染不同的部件或节点。

export default [
    {
        id: 'home',
        path: 'home',
        outlet: 'home',
        children: [
            {
                id: 'about',
                outlet: 'about'
            }
    }
];

• 根据上述的路由定义，如果 URL 路径设置为 /#home/about，那么对于 id 为“home”的 Route，isExact() 的值将为 false；如果是 home Route 的子 Route，且 id 为“about”时，isExact() 的值将为 true，如以下所示：

src/App.tsx

import { create, tsx } from '@dojo/framework/core/vdom';
import Route from '@dojo/framework/routing/Route';
const factory = create();
export default factory(function App() {
    return (
        <div>
            <Route
                id="home"
                renderer={(homeMatchDetails) => {
                    console.log('home', homeMatchDetails.isExact()); // home false
                    return (
                        <Route
                            id="about"
                            renderer={(aboutMatchDetails) => {
                                console.log('about', aboutMatchDetails.isExact()); // about true
                                return [];
                            }}
                        />
                    );
                }}
            />
        </div>
});

isError()

• isError(): boolean: 一个函数，用于指出路由是否与路径匹配错误。表示经过匹配后，没有找到匹配项。

• 根据上述的路由定义，如果 URL 路径设置为 /#home/foo，则无法匹配到路由，所以 home Route 的 matchDetails 对象的 isError() 将返回 。导航到 /#home 或 /#home/about 将返回 false，因为这两个路由已定义过。

• type: 'index' | 'partial' | 'error': 路由的匹配类型，值为 index、partial 或 error。不要直接使用 type，而是组合使用 isExact 和 isError。

export default [
    {
        id: 'home',
        path: 'home',
        outlet: 'home',
        children: [
            id: 'about',
            path: 'about',
            outlet: 'about'
        ]
    }
];

• 根据上述的路由定义，每个 outlet 对应的 type 值应为：

router

• router: RouterInterface: 路由实例，用于创建链接和触发路由变更。更多信息参考路由 API。

src/routes.ts

export default [
    {
        id: 'home',
        path: 'home',
        outlet: 'home',
        children: [
            {
                id: 'home-details',
                path: 'details',
                outlet: 'home-details'
            }
        ]