使用 MatchDetails

对于路由变更后匹配到的每个 route，都会将 MatchDetails 注入给 Route 和 Outlet 部件。MatchDetails 对象中包含匹配路由的详细信息。

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

queryParams

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

src/routes.ts

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

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

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

params

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

src/routes.ts

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

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

{
    page: 'about';
}

isExact()

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

src/routes.ts

export default [
    {
        id: 'home',
        path: 'home',
        outlet: 'home',
        children: [
            {
                id: 'about',
                path: '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: 一个函数，用于指出路由是否与路径匹配错误。表示经过匹配后，没有找到匹配项。

src/routes.ts

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

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

type

• 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'
            }
        ]
    }
];

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={(matchDetails) => {
                    const { params, queryParams, isExact, isError, router } = matchDetails;
                    const gotoHome = () => {
                        const link = router.link('home');
                        if (link) {
                            router.setPath(link);
                        }
                    };
                    if (isExact()) {
                        // The path `home` was matched
                        return <div>Home Page</div>;
                    }
                    if (isError()) {
                        // The `home` segment of the path was matched but the
                        // next segment was not matched for example, `home/other`
                        return (
                            <div>
                                <button onclick={gotoHome}>Goto Home</button>
                                <div>Unknown Page</div>
                            </div>
                        );
                    }
                    // The `home` segment of the path was matched and the next
                    // segment was also matched for example, `home/details`
                    return <div>Partial Match for Home</div>;
                }}
            />
        </div>
    );
});