Using MatchDetails

For every route that is matched on a route change, MatchDetails are injected into the both the Route and the Outlet widget. The MatchDetails object contains specific details for a matched route.

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

queryParams

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

src/routes.ts

  1. export default [
  2. {
  3. id: 'home',
  4. path: 'home',
  5. outlet: 'home'
  6. }
  7. ];
  • given the URL path /#home?foo=bar&baz=42, the queryParams object will look like:
  1. {
  2. foo: 'bar',
  3. baz: '42'
  4. }

params

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

src/routes.ts

  1. export default [
  2. {
  3. id: 'home',
  4. path: 'home/{page}',
  5. outlet: 'home'
  6. }
  7. ];
  • given the URL path /#home/about, the params object will have look like:
  1. {
  2. page: 'about';
  3. }

isExact()

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

src/routes.ts

  1. export default [
  2. {
  3. id: 'home',
  4. path: 'home',
  5. outlet: 'home',
  6. children: [
  7. {
  8. id: 'about',
  9. path: 'about',
  10. outlet: 'about'
  11. }
  12. ]
  13. }
  14. ];
  • given the above route definition, if the URL path is set to /#home/about, then isExact() will evaluate to false for the Route with the id “home” and true for a Route that is a child of the home Route with the id “about” as shown in the following file:

src/App.tsx

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  2. import Route from '@dojo/framework/routing/Route';
  3. const factory = create();
  4. export default factory(function App() {
  5. return (
  6. <div>
  7. <Route
  8. id="home"
  9. renderer={(homeMatchDetails) => {
  10. console.log('home', homeMatchDetails.isExact()); // home false
  11. return (
  12. <Route
  13. id="about"
  14. renderer={(aboutMatchDetails) => {
  15. console.log('about', aboutMatchDetails.isExact()); // about true
  16. return [];
  17. }}
  18. />
  19. );
  20. }}
  21. />
  22. </div>
  23. );
  24. });

isError()

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

src/routes.ts

  1. export default [
  2. {
  3. id: 'home',
  4. path: 'home',
  5. outlet: 'home',
  6. children: [
  7. id: 'about',
  8. path: 'about',
  9. outlet: 'about'
  10. ]
  11. }
  12. ];
  • 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 Route‘s matchDetails 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

  • 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.
  1. export default [
  2. {
  3. id: 'home',
  4. path: 'home',
  5. outlet: 'home',
  6. children: [
  7. id: 'about',
  8. path: 'about',
  9. outlet: 'about'
  10. ]
  11. }
  12. ];
  • given the above route definition, the following values of type would be provided to each route:
URL pathHome routeAbout route
/#home‘index’N/A
/#home/about‘partial’‘index’
/#home/foo‘error’N/A

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

  1. export default [
  2. {
  3. id: 'home',
  4. path: 'home',
  5. outlet: 'home',
  6. children: [
  7. {
  8. id: 'home-details',
  9. path: 'details',
  10. outlet: 'home-details'
  11. }
  12. ]
  13. }
  14. ];

src/App.tsx

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  2. import Route from '@dojo/framework/routing/Route';
  3. const factory = create();
  4. export default factory(function App() {
  5. return (
  6. <div>
  7. <Route
  8. id="home"
  9. renderer={(matchDetails) => {
  10. const { params, queryParams, isExact, isError, router } = matchDetails;
  11. const gotoHome = () => {
  12. const link = router.link('home');
  13. if (link) {
  14. router.setPath(link);
  15. }
  16. };
  17. if (isExact()) {
  18. // The path `home` was matched
  19. return <div>Home Page</div>;
  20. }
  21. if (isError()) {
  22. // The `home` segment of the path was matched but the
  23. // next segment was not matched for example, `home/other`
  24. return (
  25. <div>
  26. <button onclick={gotoHome}>Goto Home</button>
  27. <div>Unknown Page</div>
  28. </div>
  29. );
  30. }
  31. // The `home` segment of the path was matched and the next
  32. // segment was also matched for example, `home/details`
  33. return <div>Partial Match for Home</div>;
  34. }}
  35. />
  36. </div>
  37. );
  38. });