Cannot Access Ember child route via url and redirects me to the parent route

Question

I want to access a child route via url eg:https://my-app.com/dashboard/library. When i click this, Ember redirects me to https://my-app.com/dashboard and populates this route's model data correctly, but i want to go to https://my-app.com/dashboard/library, with its new model data. From the other hand i can access https://my-app.com/login via url, that has no model data btw.

At environment.js i have locationType: "auto", and my router.js is like:

Router.map(function() {
  this.route('login');
  this.route('dashboard', function() {
    this.route('child', {path: '/child/:child_id'});
    this.route('library');
  });
});

My Routes:

// Route: dashboard
import Ember from 'ember';
import RouteHistoryMixin from 'ember-route-history/mixins/routes/route-history';

export default Ember.Route.extend(RouteHistoryMixin, {
    model: function() {
        let userId = this.authentication.getPlayerId();
        let actions =  this.store.findAll('action');
        return Ember.RSVP.hash({
            actions: actions,
            tasks: Ember.RSVP.all([actions]).then((actions) => {
                return this.store.findAll('task')
            }),
            rank: this.store.findAll('rank')
        });
    },
    afterModel: function(){
        this.transitionTo('dashboard.index');   // needless
    },
    setupController(controller, model) {
        this._super(...arguments);
        Ember.set(controller, 'tasks', model.tasks);
        Ember.set(controller, 'rank', model.rank);
    }
    // . . .

And

// Route: dashboard/library
import Route from '@ember/routing/route';
import Ember from 'ember';
import RouteHistoryMixin from 'ember-route-history/mixins/routes/route-history';

export default Route.extend(RouteHistoryMixin, {
    complete: Ember.inject.service(),
    queryParams: {
        taskId: {}
    },
    model(params) {
        if(params.taskId) {
            return Ember.RSVP.hash({
                article: this.store.query('article', { filter: '{"inSyllabus": true}'}),
                task: this.store.query('task', { filter: '{"id": ' + params.taskId + '}'})
            });
        }
        else {
            return Ember.RSVP.hash({
                article: this.store.query('article', { filter: '{"inSyllabus": true}'})
            });
        }
    },
    setupController(controller) {
        this._super(...arguments);
        if (controller.taskId)
            this.store.findRecord('task', controller.taskId).then((task) => {
                controller.set('libraryQueryParam', task.points);
                // Notify Task completion
                let payload = {
                    startDate: new Date(),
                    endDate: new Date(),
                    points: task.points,
                    entries: 1
                };
                // PUT HTTP COMMAND FOR PLAYER
                let playerTask = this.store.createRecord('playTaskTest', payload);
                playerTask.save();
            });
    }
    // . . .

May be a configuration flag or a Router config issue ?

How can i access this child route via url or has something like that happened to any of you?

can you share the routes for dashboard and dashboard/library? — NullVoxPopuli
can you move those to your question, and then include how you define the links that you're clicking? — NullVoxPopuli
Just want to be certain that you are actually being redirected to a new URL. When you nest routes like this the /dashboard/child the template for dashbaord will be rendered on the screen and anything in child will be placed inside the {{outlet}} of dashboard. — jrjohnson

Joe Hany Joe Hany · Accepted Answer · 2019-03-13T02:13:40

I think the issue is in the dashboard. at the afterModel hook:

afterModel: function(){
    this.transitionTo('dashboard.index');   // needless
}

This part redirects to dashboard.index every time you call dashboard route. Remember dashboard.index is a child route same as child and library so you will never reach them.

Cannot Access Ember child route via url and redirects me to the parent route

1 Answers