Ember.js : Custom "index" route's path and Custom "/" path's route

"index" Route

The index route, which will handle requests to the root URI (/) of our site.
How to generate a new route called index:
ember g route index
The index route is special: it does NOT require an entry in the router's mapping.

a Nested "index" Route

An index nested route works similarly to the base index route. It is the default route that renders when no route is provided. Use 'rentals' as example, when we navigate to /rentals, Ember will attempt to load the rentals index route as a nested route.
To create an index nested route, run the following command:
ember g route rentals/index
If you open up your Router (app/router.js) you may notice that the rentals line has changed. This extra function() {} is required because it needs a child route, the this.route('index', { path: '/'}); is implied.

Router.map(function() {
  this.route('about');
  this.route('contact');
  this.route('rentals', function() {
    // implied code
    // this.route('index', { path: '/'});
  });
});

replaceWith and transitionTo

Use "replaceWidth" and "transitionTo", We can simply forward "/" to the "rentals" route. You will found the url displayed in url bar will changed from "http://localhost" to "http://localhost/rentals".
Well, everything is fine here except one little fault.
I do not want this redirect from "/" to "/rentals".
I hope it always be "/".
Can we make it ?

Is "index/index" possible ?

I tried below command:

ember g route index/index
installing route
  create app/routes/index/index.js
  create app/templates/index/index.hbs
updating router
  add route index/index
installing route-test
  create tests/unit/routes/index/index-test.js

Command execute without errors, but blank page showed with "http://localhost".
It seems not work. Then I remember the impled code:
this.route('index', { path: '/'});

However, you can add the index route if you want to customize it. For example, you can modify the index route's path by specifying this.route('index', { path: '/custom-path'}).

Custom "index" route's path

We can custom "index" route's path by the impled code.
I guess We can custom the path's route also.
this.route('rentals', {path:'/'});
Ember server will handle requests to the root URI (/) to route "rentals" rather than the default "index" route now.
Can it works ? Let's try

Custom path's route

I use super-rentals as a example.
First I destroy "index" route.
ember d route index
Modify the app router.

git diff app/router.js
diff --git a/app/router.js b/app/router.js
index 254d53d..9f14d85 100644
--- a/app/router.js
+++ b/app/router.js
@@ -9,7 +9,7 @@ const Router = EmberRouter.extend({
 Router.map(function() {
   this.route('about');
   this.route('contact');
-  this.route('rentals', function() {
+  this.route('rentals', {path:'/'}, function() {
     this.route('show', { path: '/:rental_id' });
   });
 });

Modify templates, all link to "index" replaced with "rentals".

-  {{#link-to 'index' class="button"}}
+  {{#link-to 'rentals' class="button"}}

ember serve
I got what I wished.
The url bar is clean now.
Only "http://localhost", no "rentals" anymore.

Refers

Routes and templates
Adding Nested Routes

❤️ Support This Blog

---

If this post helped you, you can support my writing with a small donation. Thank you for reading.

---

Coffee ☕ Thanks 🙏 Extra Support ❤️