时间戳

首页 > 解决方案 > 无法使用 vertx 设置反应路由

reactjs - 无法使用 vertx 设置反应路由

问题描述

public class BackendVerticle extends AbstractVerticle {

  @Override
  public void start() throws Exception {
    // tag::backend[]
    Router router = Router.router(vertx);
    
    router.get().handler(StaticHandler.create()); // <3>

    vertx.createHttpServer()
      .requestHandler(router)
      .listen(8080);
    // end::backend[]
  }

  // tag::main[]
  public static void main(String[] args) {
    Vertx vertx = Vertx.vertx(); // <1>
    vertx.deployVerticle(new BackendVerticle()); // <2>
  }
  // end::main[]
}

我在https://how-to.vertx.io/single-page-react-vertx-howto/之后创建了带有顶点的反应应用程序。我已经使用 react-router 设置了反应路由，当我使用默认情况下在 localhost:3000 上运行的内部反应节点服务器时工作正常。但是当我通过 vertx 静态处理程序提供静态页面时，除了默认/路由其他路由返回“未找到” 在此处输入图像描述

标签： reactjsroutesstatichandlervert.x

解决方案

构建静态网站时，它包含在单个索引 HTML 文件中。

React Router 允许为特定视图创建路径。这些路径可以由 React Router 解释，但它们不会映射到后端服务器上的实际文件。

这就是为什么404 NOT FOUND如果您尝试加载除/.

要解决此问题，请将 Vert.x Web 路由器配置为StaticHandler将无法加载的任何内容重新路由到/：

// After you've setup the other routes
router.get().handler(StaticHandler.create());
router.get().handler(rc -> rerouteToIndex(rc));

private void rerouteToIndex(RoutingContext rc) {
  if (!"/".equals(rc.normalisedPath())) {
    rc.reroute("/");
  } else {
    rc.next();
  }
}

推荐阅读