Navigation between child routes

Question

I keep getting routes not found errors when navigation between child routes. I have tried several solutions, I always inject and I always refresh now after child configuration. however I'm stil unable to navigate to a specific route.

When I try to navigate to account_view from create.ts it says the route name does not exist, when I list all the routes in this.router in create.ts it only says accounts_overview and accounts_create but not the child routes of accounts_overview.

app.ts

import {inject} from 'aurelia-framework';
import {RouterConfiguration, Router} from 'aurelia-router';
import {HttpClient} from "aurelia-fetch-client";
import {AureliaConfiguration} from "aurelia-configuration";
import {Container} from 'aurelia-dependency-injection';
import {AuthorizeStep} from 'app/authorize-step';

export class App {
    private router: Router;

    configureRouter(config: RouterConfiguration, router: Router): void {
        config.title = 'Optios partners';
        config.addAuthorizeStep(AuthorizeStep);
        config.map([
            { route: '', redirect: "login" },
            { route: '/accounts', name: 'accounts', moduleId: 'account/view/index', title: 'Accounts', settings: { roles: [ 'partner', 'admin' ] } }
        ]);
        this.router = router;
    }
}

accounts/view/index.ts

import {computedFrom} from 'aurelia-framework';
import {RouterConfiguration, Router} from 'aurelia-router';

export class Index {
    router: Router;
    hasSearchFocus: boolean;
    search: string = '';

    configureRouter(config: RouterConfiguration, router: Router)
    {
        config.map([
            { route: '/overview', name: 'accounts_overview', moduleId: 'account/view/overview', nav: true },
            { route: '/create', name: 'accounts_create', moduleId: 'account/view/create', nav: true }
        ]);

        this.router = router;
        this.router.refreshNavigation();
    }
}

accounts/view/overview.ts

import {AccountRepository} from "../repository/account-repository";
import {inject, computedFrom} from 'aurelia-framework';
import {RouterConfiguration, Router} from 'aurelia-router';
import {EventAggregator} from 'aurelia-event-aggregator';

@inject(AccountRepository, EventAggregator)
export class Overview {
    router: Router;
    eventAggregator: EventAggregator;
    accountRepository: AccountRepository;
    accounts: string[];
    previousLetter: string = 'Z';

    configureRouter(config: RouterConfiguration, router: Router)
    {
        config.map([
            { route: ['', '/blank'], name: 'account_blank', moduleId: 'account/view/blank', nav: true },
            { route: '/:id', name: 'account_view', moduleId: 'account/view/view', nav: true, href: '0' }
        ]);

        this.router = router;
        this.router.refreshNavigation();
    }
}

accounts/view/create.ts

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
import {computedFrom} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import {AccountRepository} from "../repository/account-repository";

@inject(AccountRepository, Router)
export class Create
{
    router: Router;
    accountRepository: AccountRepository;
    name: string;
    isSubmitted: boolean = false;

    constructor(accountRepository: AccountRepository, router: Router)
    {
        this.accountRepository = accountRepository;
        this.router            = router;
    }

    create()
    {
        this.isSubmitted = true;
        if (this.isValid()) {
            this.accountRepository
                .create(this.name)
                .then(response => {
                    if (! response.ok) {
                        throw Error(response.statusText);
                    }

                    return response.json();
                })
                .then(response => {
                    console.log(this.router.routes);
                    this.router.navigateToRoute('account_view');

                    return response;
                })
                .catch(error => {
                    console.error(error);
                });
        }
    }
}

Why are you using leading slashes in the routes definition? They should work fine without them gist.run/?id=11b928907440e90ea6564ec18d4e0f76 — Fabio Luz
yeah it does, I don't know it just happened. I was unable to solve my question but I did change my approach of working and ditched child routes and put everything in separate 'custom' elements. Which causes me to repeat small parts of the layout sometimes. — tmas
You shouldn't be using Custom Elements for this as you will lose deep linking. — Ashley Grant

Ashley Grant Ashley Grant · Accepted Answer · 2017-02-19T02:56:15

You cannot route to a named route on a different Child Router. We are discussing ways to deal with issues like this in a future release of Aurelia.

That being said, I doubt you'll ever be able to do what you're trying to do in the way that you are trying to do this. You have a child router structure that looks like this:

     APP
      |
    ACCOUNTS
     /    \
  OVERVIEW CREATE

You are trying to have the CREATE router route to a route in the OVERVIEW router, which it has no knowledge of. IMO, you have an overly nested router structure. I would flatten the router structure some and then think about using the EventAggregator to publish an event that the parent router's page would subscribe to and cause a navigation event or something.

Navigation between child routes

1 Answers