为什么直接导航到该路线时不匹配?

编程入门 行业动态 更新时间:2024-10-07 20:25:59
本文介绍了为什么直接导航到该路线时不匹配?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

记录:这是使用当前相对较新的"@angular/router": "3.0.0-alpha.8",路线定义位于帖子的底部.

For the record: This is using the currently rather new "@angular/router": "3.0.0-alpha.8", the route definitions are at the bottom of the post.

当尝试在我的应用程序中导航时,行为是不同的,具体取决于我是直接输入URL还是跟随链接:

When attempting to navigate in my application the behaviour is different depending on whether I enter the URL directly or following a link:

  • 作品:在地址栏中输入localhost:9292,可以正确转发到localhost:9292/about
  • 作品:通过地址栏直接导航到localhost:9292/about
  • 工作:如果我通过<a>标记导航到localhost:9292/about/projects,则在FrontComponent和[routerLink]="['projects']"属性的上下文中,路由工作正常.
  • 损坏::直接导航到localhost:9292/about/projects会导致以下错误消息(缩短了Stacktrace):

  • Works: Entering localhost:9292 in the address-bar, correctly forwards to localhost:9292/about
  • Works: Navigating directly to localhost:9292/about via the address-bar
  • Works: If I navigate to localhost:9292/about/projects via an <a> tag, in the context of the FrontComponent and the [routerLink]="['projects']" attribute, the routing works just fine.
  • Broken: Directly navigating to localhost:9292/about/projects results in the following error message (shortened Stacktrace):

Unhandled Promise rejection: Cannot match any routes: 'projects' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'projects' Stack trace: applyRedirects/<@localhost:9292/node_modules/@angular/router/apply_redirects.js:29:34 Observable.prototype.subscribe@localhost:9292/node_modules/rxjs/Observable.js:52:57

我在这里可能做错了什么?有没有办法查看错误消息中已拒绝的所有路由?

What could I possibly be doing wrong here? Is there possibly any way to see all routes that have been rejected in the error message?

编辑,因为现在已经多次建议这样做:我不怀疑这是服务器端的问题.以前通过router-deprecated进行的路由工作正常,而从失败的路由提供的HTML看起来也很好.但是以防万一,这是相关的服务器端路由代码(ruby和sinatra):

Edit because this has been suggested numerous times now: I don't suspect this is a server-side issue. The previous routing via router-deprecated worked fine and the HTML served from the failing route looks just fine. But just in case, this is the relevant server side routing code (ruby with sinatra):

# By now I have too often mistakenly attempted to load other assets than # HTML files from "user facing" URLs, mostly due to paths that should have # been absolute but weren't. This route attempts to catch all these # mistakes rather early, so that the show up as a nice 404 error in the # browsers debugging tools get /^\/(about|editor)\/.*\.(css|js)/ do halt 404, "There are no assets in `editor` or `about` routes" end # Matching the meaningful routes the client knows. This enables navigation # even if the user submits a "deep link" to somewhere inside the # application. index_path = File.expand_path('index.html', settings.public_folder) get '/', '/about/?*', '/editor/*' do send_file index_path end # Catchall for everything that goes wrong get '/*' do halt 404, "Not found" end

我不怀疑这是由于错误的路由定义(路由确实通过链接起作用),但是为了完整起见,以下是这些路由:

I do not suspect that this is due to wrong route definitions (the routing does work via the link), but for the sake of completeness these are the routes:

front/front.routes.ts :

export const FrontRoutes : RouterConfig = [ { path: '', redirectTo: '/about', terminal: true }, { path : 'about', component: FrontComponent, children : [ { path: 'projects', component: ProjectListComponent}, { path: '', component: AboutComponent}, ] } ]

editor/editor.routes.ts :

export const EditorRoutes : RouterConfig = [ { path: "editor/:projectId", component : EditorComponent, children : [ { path: '', redirectTo: 'settings', terminal: true}, { path: 'settings', component : SettingsComponent }, { path: 'schema', component : SchemaComponent }, { path: 'query/create', component : QueryCreateComponent }, { path: 'query/:queryId', component : QueryEditorComponent }, { path: 'page/:pageId', component : PageEditorComponent }, ] } ]

app.routes.ts :

import {EditorRoutes} from './editor/editor.routes' import {FrontRoutes} from './front/front.routes' export const routes : RouterConfig = [ ...FrontRoutes, ...EditorRoutes, ] export const APP_ROUTER_PROVIDERS = [ provideRouter(routes) ]

推荐答案

将"/"设置为index.html的base标记的值,以使路由器正确解析子路径.这与官方文档不符,但似乎可以正常工作.

Set "/" as value to the base tag of the index.html to make the router resolve child paths correctly. This is not in line with the offical docs but seems to work.

更多推荐

为什么直接导航到该路线时不匹配?

本文发布于:2023-11-25 21:32:36,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1631425.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:到该   不匹配   路线

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!