使用Web应用程序上下文对路由器v6嵌套路由和后端部署进行反应

Question

我正在使用create-react-app（CRA），react-router v6开发一个Web应用程序，并将其部署到Wildfly应用程序服务器中。

客户端路由在CRA中运行良好，但是当通过Web应用程序上下文部署到Wildfly时，我遇到了麻烦。

我的路由是通过useRoutes()通过基于对象的配置定义的，其层次结构为：

- /
  - reports
    - :reportId
      - resources

部署到Wildfly时，URL如下所示，其中/app是Web应用程序上下文：

http://localhost:8080/app/
http://localhost:8080/app/reports
http://localhost:8080/app/reports/:reportId
http://localhost:8080/app/reports/:reportId/resources

当我单击<Link to="reports" .../>时，它将被视为绝对URL，并删除了Web应用程序上下文，因此URL变为：http://localhost:8080/reports

然后我在注册路由路径时尝试使用绝对URL而不是相对URL，但是当我这样做时，嵌套路由似乎没有响应。

另一个麻烦之处是，在从后端获取报告之前，我提交了一个过滤器表单。但是，在提交时，我将执行一些表单验证，然后使用钩子navigate中的useNavigate()来导航到报告路径。看来此API仅支持绝对路径，而不支持相对路径。

我不确定我是否做错了什么，因此如果有人对上述建议有任何建议，将不胜感激！谢谢。