使用 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的子级且 ID 为“about”的Route，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'
		]
	}
];

• 给定上面的路由定义，以下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>
	);
});