0

ログイン後にホームページを表示する必要がある Angular アプリがあります。アプリが正しくログインすると、URL バーに表示される URL に「!」、「%2F」、「%3F」などのUTF-8 文字が含まれ、リロード時にエラーが表示されるError: Cannot match any routes. URL Segment: '!'

app-routing.module.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 && 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/#!#%2Fhome%3Fguid=c217-21f6-189f-8b69-a1a6&screenId=3b3f2275-0ad4-48d6-bd76-8270cb9b9807

ブラウザで上記の URL を使用して、ページをリロードしようとすると、次のエラーが表示され、ログイン ページにリダイレクトされます

エラー: どのルートとも一致しません。URL セグメント: '!'

Angular Version used: 12.2.9

これはAngular 12の問題でしょうか、それともここで本当に間違ったことをしていますか?

4

1 に答える 1