BackboneJS 路由器不呈现视图

如何解决BackboneJS 路由器不呈现视图

我将 BackboneJS 与 TypeScript/Vite 一起使用，并有以下文件和一个路由器和一个视图：

import Backbone from "backbone";
import { AboutView } from "./views/about";
import { MainView } from "./views/main";

export class Router extends Backbone.Router {
  constructor(options?: Backbone.RouterOptions) {
    super(options);

    this.routes = {
      "": "home","about": "about"
    };
  }
  
  home() {
    app.Views.Home = new MainView({
      el: "#app"
    });
    app.Views.Home.render();
  }

  about() {
    app.Views.About = new AboutView({
      el: "#app"
    });
    app.Views.About.render();
  }
};

这是我的MainView：

import Backbone from "backbone";
import template from "lodash/template";

export class MainView extends Backbone.View {
  template = `
  <h1>Hello,<%= name %>!</h1>
  <button id="aboutlink">About</button>
  `;

  events() {
    return {
      "click #aboutlink": "aboutClick"
    }
  }

  options: Backbone.ViewOptions;
  constructor(options: Backbone.ViewOptions) {
    super(options);
    this.options = options;
  }

  render() {
    const tmpl = template(this.template);
    this.$el.html(tmpl({ name: "Name" }));
    return this;
  };

  aboutClick() {
    app.Router?.navigate("about");
  }
};

最后是 bootstrap.ts，它包含在 HTML 文件正文的末尾：

import Backbone from "backbone";
import { Router } from "./router";
import "./style.css";

app.Router = new Router();
Backbone.history.start();

然而，当我在浏览器中导航到 Vite 开发服务器时，我只看到一个空白页面。控制台中没有错误。这里发生了什么？

谢谢。