Question

有没有办法定义具有固定值集的动态路线？如果它不适合任何固定值，它将回退到下一个路线。我的当前是这样的 -

const routes = {
  path: '',
  component: AppComponent,
  childRoutes: [
    { path: '/search/top', name: 'top', component: FixedSearchComponent},
    { path: '/search/new', name: 'new', component: FixedSearchComponent},
    { path: '/search', name: 'search', component: SearchComponent},
    { path: '/search/:query', name: 'search', component: SearchComponent},
  ]
}

但我想为它定义一个参数，例如:fixedSearch，并将其预定义为仅此值。也许是这样的？如果它不适合top或new（或其他可能的设置），则会回退到search。

const routes = {
  path: '',
  component: AppComponent,
  childRoutes: [
    { path: '/search/:fixedSearch', name: 'fixedSearch', fixedSearch: ['top', 'new'], component: FixedSearchComponent},
    { path: '/search', name: 'search', component: SearchComponent},
    { path: '/search/:query', name: 'search', component: SearchComponent},
  ]
}

Answer 1

您可以在onEnter功能附加新路线，例如替换/fixed/:fixedSearch和/search/new的{{1}}。在/search/top功能中，您可以将onEnter与预定义值（:fixedSearch）进行比较，如果它们不匹配，您可以回退到['top', 'new']路线。这通常用于在允许访问路由之前检查用户是否已经过身份验证。

以下是/search的文档：

onEnter

即将输入路线时调用。它提供了下一个   路由器状态和重定向到另一个路径的功能。这将会   触发挂钩的路由实例。

如果将回调列为第3个参数，则此挂钩将运行   异步，转换将阻塞，直到回调为止   调用。

一个粗略的例子（在JSX中）可能看起来像：

onEnter(nextState, replace, callback?)

反应路由器 - 具有固定值的路径中的参数

1 个答案: