Ionic 4 routing without tabs prefix

Ionic Framework ionic-v3
1

Hello,

I am testing Ionic 4 and I am stuck since this morning on a point that could be silly for some, but as I am new in the use of Ionic / Angular I can not move forward. I hope to find a solution to my problem by submitting it to you.

When I start a project with Ionic 4 the Starter Type “tabs”, the urls are in this format:
http://localhost:8100/tabs/(home:home)
http://localhost:8100/tabs/(about:about)
http://localhost:8100/tabs/(contact:contact)

The application will be the mobile version of an existing site and we would like the urls to correspond between the two versions mobile / desktop

How can we have urls in this format:
http://localhost:8100/home
http://localhost:8100/about
http://localhost:8100/contact

Thanks for your help.

1 Like
2

Hi @codiqa100075846 :wave:

Unfortunately this is the format that URLs have in the Angular Router with named outlets (in this case, the tabs). These URLs can’t be replaced, but you can add the paths you want to redirect to the outlet paths, like:

{
  path: 'home',
  redirectTo: '/tabs/(home:home)'
}

I know is not exactly want you want, but is the best alternative. You can learn more about redirects in the Angular Router docs.

Best,
Rodrigo

3

Update: The Ionic team has been working on removing the requirement for named outlets in the tabs so cleaner URLs will be possible. Not available yet but may drop in the coming betas. You can see an example in action here: https://twitter.com/adamdbradley/status/1071163880838180866?s=21

4

Hello Fdez Romero,

I truly thank you for taking the time that you did to give me answers. I tested your suggestion yesterday, and indeed, it did not give the desired result. I’m delighted to hear that the Ionic team is working on this topic and I look forward to testing the stable version 4 of Ionic.

Best regards

1 Like
5

Hi everybody,
Is there any solutions on this issue?
I started a new tabs project today, it seems path with a prefix “tabs” is a silly format.
/tabs/home
/tabs/about
/tabs/notification
…
a clean, regular path should like
/home
/about
/notification
…

6

Hi,
I am always looking for a solution, but apparently it is not possible using the system of Tabs, I see it a pity for those who want to use Ionic as a Web App.
Good change.

7

Is there any progress? The need to have “tabs” prefix is hilariously pathetic.

8

Hi. Is there any ETA?

9

Nothing on this in over a year? It seems silly to be forced to use child routing for ionic’s tabbed routing.

10

Yes I agree. I don’t think there will be a solution for this right now. I have abandoned the tab system, and I am not using it because of this problem. Too bad.