ditoslav
ditoslav

Reputation: 4872

Reloading of page does not route to correct nested route

This used to work well when I have only 1 level of routing but after having 2 levels it does not work.

I have a root router

{ path: '/', name: 'Index', component: Index, useAsDefault: true },
{ path: '/settings/...', name: 'Settings', component: Settings }

and in setting I have many more async routes.

AsyncRoute {aux: null, path: "./", name: "Overview", data: undefined, useAsDefault: undefined}

etc.

When I navigate via route-links it works but when I reload my page at say /settings/user/info it loads a blank page with ¸only stuff from root script but without anything in the router-outlet.

How do I fix this? Has it got something to do with the async routes having relative paths specified?

Upvotes: 0

Views: 782

Answers (1)

Sajin M Aboobakkar
Sajin M Aboobakkar

Reputation: 4229

I had met the same issue but I resolved by using this code inside of index.html.Its a bug with APP_BASE_HREF

<head>
    <base href="/">
    <!-- Set the base href -->
    <script>document.write('<base href="'+ document.location +'"/>');</script>
</head>

Upvotes: 1

Related Questions