使用 MatchDetails

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>
	);
});