如何在redirectTo字段配置动态URL？实现404时重定向至前页

Hey there! So you want to redirect users back to the previous page when they hit a 404 in your Angular app? Let's break down how to do this, since you can't just put a dynamic value directly in redirectTo—that field only accepts static paths, not dynamic URLs like the previous page.

Solution 1: Use a Custom 404 Component to Handle Redirect #

This is the simplest approach: create a dedicated component that triggers a browser back navigation when loaded.

1. First, generate a NotFoundComponent (add a quick message to help users understand what's happening):

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  template: '<div style="text-align: center; margin-top: 2rem;">Page not found! Redirecting back...</div>'
})
export class NotFoundComponent implements OnInit {
  constructor(private location: Location) {}

  ngOnInit(): void {
    // Add a slight delay so users see the message before redirecting
    setTimeout(() => {
      this.location.back();
    }, 1200);
  }
}

2. Update your route configuration to use this component instead of redirectTo:

const appRoutes: Routes = [
  {
    path: 'Sk',
    canActivate: [AuthGuard],
    children: [
      { path: 'announce', component: AnnounceComponent },
      // Replace the redirectTo with our new component
      { path: '**', component: NotFoundComponent }
    ]
  },
  // Handle root-level 404s too
  { path: '**', component: NotFoundComponent }
];

Solution 2: Use a Route Guard for Dynamic Redirects #

If you don't want a dedicated component, you can use a CanActivate guard to handle the redirect before the 404 route even loads.

1. Create a RedirectBackGuard:

import { Injectable } from '@angular/core';
import { CanActivate, Router, UrlTree } from '@angular/router';
import { Location } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class RedirectBackGuard implements CanActivate {
  constructor(private location: Location, private router: Router) {}

  canActivate(): boolean | UrlTree {
    // Check if there's a previous page in browser history
    if (history.length > 1) {
      this.location.back();
      return false; // Prevent the 404 route from activating
    } else {
      // Fallback: if there's no history (user directly typed the bad URL), redirect to home
      return this.router.parseUrl('/');
    }
  }
}

2. Update your routes to use this guard:

const appRoutes: Routes = [
  {
    path: 'Sk',
    canActivate: [AuthGuard],
    children: [
      { path: 'announce', component: AnnounceComponent },
      { 
        path: '**', 
        canActivate: [RedirectBackGuard],
        // You can use an empty component here, or reuse NotFoundComponent for a message
        component: NotFoundComponent 
      }
    ]
  },
  { 
    path: '**', 
    canActivate: [RedirectBackGuard],
    component: NotFoundComponent 
  }
];

Key Notes #

• Why can't we use redirectTo directly? Angular's route configuration is static—it gets parsed when the app initializes, so it can't dynamically reference the previous page's URL at runtime.
• Always add a fallback: If a user directly enters a bad URL (no previous page history), location.back() won't work. The guard example handles this by redirecting to the home page, but you can adjust this to any default route you prefer.

内容的提问来源于stack exchange，提问作者Undefined