Using the outlet MatchDetails

Note: All examples assume that the default HashHistory history manager is being used.

• queryParams: { [index: string]: string }: The query params from the matched route.

• given the URL path /#home?foo=bar&baz=42, the queryParams object will look like:

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

params

• params: { [index: string]: string }: The path params from the matched route.

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

• given the URL path /#home/about, the params object will have look like:

• isExact(): boolean: A function that indicates if the outlet is an exact match for the path. This can be used to conditionally render different widgets or nodes.

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

• given the above route definition, if the URL path is set to /#home/about, then isExact() will evaluate to false for the Outlet with the id “home” and true for the an Outlet that is a child of the home Outlet with the id “about” as shown in the following file:

src/App.tsx

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

isError()

• isError(): boolean: A function indicates if the outlet is an error match for the path. This indicates after this outlet was matched, no other matches were found.

• given this route definition, if the URL path is set to /#home/foo then there is no exact route match, so the isError() method on the home ‘s martchDetails object will yield true. Navigating to /#home or /#home/about however will cause the same method to return false since both routes are defined.

• type: 'index' | 'partial' | 'error': The type of match for the route, either index, partial or error. Using type should not be necessary, instead favouring a combination of isExact and isError.

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

• given the above route definition, the following values of type would be provided to each outlet:

router

• router: RouterInterface: The router instance which can used to create links and initiate route changes. For more information see the router API.

src/routes.ts

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