路由不起作用我的代码有什么问题

Question

我的 app-routing.module.ts 中有这条路线缺少一些东西，因为 当我进入这个页面时

https://angular-v4-dot-unique-yew-244216.appspot.com/search

我收到错误，但是当我去这里时它可以工作

https://angular-v4-dot-unique-yew-244216.appspot.com

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SearchBooksComponent } from './search-books/search-books.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/search',
    pathMatch: 'full'
  },
  {
    path: 'search',
    component: SearchBooksComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

路线有什么问题？

这是我的 app.yaml

runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
  static_files: dist/index.html
  upload: dist/index.html
- url: /
  static_dir: dist

Answer 1

你应该重定向到search而不是/search：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'search',
    pathMatch: 'full'
  },
  {
    path: 'search',
    component: SearchBooksComponent
  }
];

路由顺序仅在两条路由冲突时才重要，如search 和**。 search 将被两条路线匹配，第一个获胜。

您可以使用像this 这样的哈希定位策略。 这个问题也解释了路径定位策略。

Answer 2

我们设置路线的顺序至关重要。尝试这个！。 最后设置默认路由。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SearchBooksComponent } from './search-books/search-books.component';

const routes: Routes = [
 { path: 'search', component: SearchBooksComponent },
 { path: '', redirectTo: 'search',pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }