子路由上的页面重新加载不起作用

Question

我在用角飞镖。我有一个具有不同组件的项目，通常路由工作正常，但是，当我试图重新加载按下"f5“时，我只收到一个在子组件中的白色页面，而在其他组件中，重新加载工作正常。控制台没有抛出错误，你能帮我吗？

我遵循路由器教程https://angulardart.dev/guide/router/4

我尝试路由相同的组件，像一个子组件和独立的，它只有在独立的时候才正确地重新加载。

routes.dart文件

import 'package:acoustic_inteligence_app/src/app/content/content_component.template.dart'
    as content_component;
import 'package:acoustic_inteligence_app/src/app/content/not_found_component/not_found_component.template.dart'
    as not_found_component;
import 'package:acoustic_inteligence_app/src/app/content/landing_component/landing_component.template.dart'
    as landing_component;
import 'package:acoustic_inteligence_app/src/app/content/start_component/start_component.template.dart'
    as start_component;
import 'package:acoustic_inteligence_app/src/app/content/team_component/team_component.template.dart'
    as team_component;
import 'package:acoustic_inteligence_app/src/app/content/transcription_component/editor_component/editor_component.template.dart'
    as editor_component;
import 'package:acoustic_inteligence_app/src/app/content/transcription_component/list_component/list_component.template.dart'
    as list_transcription_component;
import 'package:acoustic_inteligence_app/src/app/content/transcription_component/transcription_component.template.dart'
    as transcription_component;
import 'package:acoustic_inteligence_app/src/app/content/transcription_component/upload_component/upload_component.template.dart'
    as upload_component;
import 'package:acoustic_inteligence_app/src/app/login/login_component.template.dart'
    as login_component;
import 'package:acoustic_inteligence_app/src/app/register/register_component.template.dart'
    as register_component;
import 'package:angular_router/angular_router.dart';

import 'package:acoustic_inteligence_app/src/front/routes/route_paths.dart';
export 'package:acoustic_inteligence_app/src/front/routes/route_paths.dart';

class Routes {
    static final content = RouteDefinition(
    routePath: RoutePaths.content,
    component: content_component.ContentComponentNgFactory,
    );

    static final landing = RouteDefinition(
    routePath: RoutePaths.landing,
    component: landing_component.LandingComponentNgFactory,
    );

    static final not_found = RouteDefinition(
    routePath: RoutePaths.not_found,
    component: not_found_component.NotFoundComponentNgFactory,
    );

    static final login = RouteDefinition(
        routePath: RoutePaths.login,
        component: login_component.LoginComponentNgFactory,
        useAsDefault: true);

    static final register = RouteDefinition(
        routePath: RoutePaths.register,
        component: register_component.RegisterComponentNgFactory);

    static final list_transcription = RouteDefinition(
        routePath: RoutePaths.list_transcription,
        component:
        list_transcription_component.ListTranscriptionComponentNgFactory,
        useAsDefault: true);

    static final upload = RouteDefinition(
        routePath: RoutePaths.upload,
        component: upload_component.UploadComponentNgFactory);

    static final editor = RouteDefinition(
        routePath: RoutePaths.editor,
        component: editor_component.EditorComponentNgFactory);

    static final team = RouteDefinition(
        routePath: RoutePaths.team,
        component: team_component.TeamComponentNgFactory);

    static final transcription = RouteDefinition(
        routePath: RoutePaths.transcription,
        component: transcription_component.TranscriptionComponentNgFactory);

    static final start = RouteDefinition(
        routePath: RoutePaths.start,
        component: start_component.StartComponentNgFactory,
        useAsDefault: true);

    static final appRoute = <RouteDefinition>[
    content,
    login,
    register,
    landing,
    RouteDefinition.redirect(
        path: '',
        redirectTo: RoutePaths.login.toUrl(),
    ),
    RouteDefinition(
        path: '.+',
        component: not_found_component.NotFoundComponentNgFactory,
    ),
    ];

    static final contentRoute = <RouteDefinition>[team, transcription, start,
        RouteDefinition(
        path: '.+',
        component: not_found_component.NotFoundComponentNgFactory,
    ),];

    static final transcriptionRoute = <RouteDefinition>[
    editor,
    list_transcription,
    upload
    ];
}

route_paths.dart文件

import 'package:angular_router/angular_router.dart';

int getId(Map<String, String> parameters) {
    final id = parameters[paramId];
    return id == null ? null : int.tryParse(id);
}

const paramId = "id";

class RoutePaths {
    //main
    static final not_found = RoutePath(path: 'not_found');
    static final landing = RoutePath(path: 'landing');
    static final content = RoutePath(path: 'app');
    static final login = RoutePath(path: 'login', useAsDefault: true);
    static final register = RoutePath(path: 'register');
    static final team = RoutePath(path: 'team', parent: content);
    static final transcription =
        RoutePath(path: 'transcription', parent: content);
    static final start =
        RoutePath(path: 'inicio', parent: content, useAsDefault: true);

    //transcription
    static final list_transcription =
        RoutePath(path: 'listado', parent: transcription, useAsDefault: true);
    static final upload = RoutePath(path: 'upload/:${paramId}', parent: transcription);

    static final editor =
        RoutePath(path: 'editor/:${paramId}', parent: transcription);
}

Answer 1

这使用来自HTML5的推送路由。使用该解决方案，您必须映射服务器上的URL，以返回在路由中可能使用的任何路径的主index.html页面。

否则，您可以添加routerProvidersHash代替。Hash策略将在URL末尾使用一个#/路径，并保持相同的起始路径。这不属于您的服务器，因此您不需要重新映射这些路径。这是好的，当你不控制服务器，但不被认为是目前的最佳实践的网页开发。