Plotly Dash多页面应用路径前缀配置及404问题求助

核心配置要点 #

• 得把Dash实例的两个前缀参数都配置对，别漏了：
  • routes_pathname_prefix：Dash内部路由的基准前缀
  • requests_pathname_prefix：服务器接收请求的URL前缀，必须和部署环境要求的/app/SWAPIT/完全一致
    示例代码：

  app = Dash(__name__,
             routes_pathname_prefix='/app/SWAPIT/',
             requests_pathname_prefix='/app/SWAPIT/',
             use_pages=True)
  

页面注册规范 #

所有页面注册时别硬编码完整前缀，用相对路径就行，Dash会自动加上实例配置的前缀：

• 首页（app.py）：

  dash.register_page(__name__, path='/')  # 最终路径：/app/SWAPIT/
  

• pages/map.py：

  dash.register_page(__name__, path='/map')  # 最终路径：/app/SWAPIT/map
  

• pages/page_1.py：

  dash.register_page(__name__, path='/page-1')  # 最终路径：/app/SWAPIT/page-1
  

• pages/page_2.py：

  dash.register_page(__name__, path='/page-2')  # 最终路径：/app/SWAPIT/page-2
  

⚠️ 别在path里写全路径（比如/app/SWAPIT/page-1），不然会和实例前缀叠加，导致路径重复出错。

导航栏链接设置 #

导航链接别手动拼路径，直接用Dash内置的page_registry里的relative_path，绝对不会错：
示例navbar.py代码：

def create_navbar():
    return html.Div([
        dcc.Link(f"{page['name']} | ", href=page["relative_path"])
        for page in dash.page_registry.values()
    ])

要是非得手动写href，就写完整的正确路径（比如/app/SWAPIT/page-1），但推荐用page_registry的方式，后续改前缀也不用挨个改链接。

排查验证步骤 #

• 打印dash.page_registry看看所有页面的注册信息，确认relative_path是不是/app/SWAPIT/xxx的格式：

  print(dash.page_registry)
  

• 检查服务器配置：确保反向代理或路由规则把/app/SWAPIT/开头的请求都转发到你的Dash应用，没拦截图表页的请求。
• 清浏览器缓存：有时候旧缓存会导致404，按Ctrl+F5强制刷新再测试。

内容的提问来源于stack exchange，提问作者BERNARD FIRANSKI