Блог

У меня есть угловое приложение, которое должно показывать домашнюю страницу после входа в систему. Когда приложение правильно входит в систему, URL-адрес, отображаемый в строке URL, содержит символы UTF-8, такие как«!», «/», «?», которые при перезагрузке показывают ошибку Error: Cannot match any routes. URL Segment: '!'

приложение-маршрутизация.модуль.ts

 const routes: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
    },
    {
        path: 'login',
        component: LoginComponent,
        pathMatch: 'full'
    },
    {
        path: 'screen/:screenName',
        component: ScreenComponent,
        pathMatch: 'full',
        canActivate: [AuthGuard]
    },
    {
        path: 'screen/:screenClassName/:screenId',
        component: ScreenComponent,
        pathMatch: 'full',
        canActivate: [AuthGuard]
    },
    {
        path: 'home',
        component: HomeComponent,
        canActivate: [AuthGuard]
    },
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes, {
            useHash: true,
            onSameUrlNavigation: 'reload',
            relativeLinkResolution: 'legacy',
            enableTracing: true
        })
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }
 

Для навигации по маршрутам используется следующая функция

Способ навигации

         this.router.navigate(urlTree, navigationExtras).then((state) => {
            if (state) {
                const [path, ...paramsValues] = urlTree;
                const safePath = path ? path.replace('/', '') : path;
                const params = this.routeParams.getParamsFromPath(safePath, paramsValues);

                if (navigationExtras amp;amp; navigationExtras.queryParams) {
                    this.routeParams.setParams(Object.assign(navigationExtras.queryParams, params));
                }
            }
        });

    setParams(params: object) {
        for (const key in params) {
            if (params.hasOwnProperty(key)) {
                this[key] = params[key];
            }
        }
    }

     getParamsFromPath(path: string, params: any[]): any {
        if (!path) {
            return null;
        }

        const activeRoute = this.router.config.find((route) => {
            const inPathParams = route.path.split('/');

            if (inPathParams[0] === path) {
                return (inPathParams.length - 1) === params.length;
            }

            return false;
        });

        if (!activeRoute) {
            return null;
        }

        const activeRouteParams = activeRoute.path.split('/');

        const routeParamsObj = {};
        activeRouteParams.forEach((paramKey) => {
            if (paramKey.startsWith(':')) {
                const key = paramKey.replace(':', '');
                routeParamsObj[key] = params.shift();
            }
        });

        return routeParamsObj;
    }
 

Теперь, когда приложение переходит на новый маршрут после входа в систему, в строке URL в браузере отображается следующий URL-адрес

http://localhost:4200/#!#/home?guid=c217-21f6-189f-8b69-a1a6amp;screenId=3b3f2275-0ad4-48d6-bd76-8270cb9b9807

С указанным выше URL-адресом в браузере, когда мы пытаемся перезагрузить страницу, она показывает следующую ошибку и перенаправляет обратно на страницу входа

Ошибка: Не удается сопоставить ни один маршрут. Сегмент URL: ‘!’

Angular Version used: 12.2.9

Может ли это быть проблемой с Angular 12 или я делаю здесь что-то действительно не так ?

Это может вам помочь? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

Функция encodeURIComponent() кодирует URI, заменяя каждый экземпляр определенных символов одной, двумя, тремя или четырьмя escape-последовательностями, представляющими кодировку символа UTF-8 (будет только четыре escape-последовательности для символов, состоящих из двух «суррогатных» символов).