Django导航栏about按钮子页面跳转路径错误如何解决

问题原因 #

跳转错误是因为导航栏的about链接使用了不带根路径前缀的相对路径，浏览器会自动将相对路径拼接在当前页面的路径后，才会出现在子页面跳转到/chapter/3/about/的问题。

修复方案 #

1. 使用Django内置URL反向解析（最推荐） #

直接在导航栏的about按钮对应的<a>标签中使用Django模板标签，根据你urls.py中定义的name参数生成绝对路径：

<!-- 替换你原来的about按钮链接 -->
<a href="{% url 'about_us' %}">关于</a>

该方案不需要硬编码路径，后续如果调整about页面的路由路径，只要name="about_us"不变，所有链接都会自动同步更新，无需手动修改。

2. 手动写根路径开头的绝对路径 #

如果不想用模板标签，直接给链接路径开头加上斜杠，代表从站点根目录开始匹配：

<a href="/about/">关于</a>

不要写about/、../about/这类相对路径，开头加/后浏览器就不会和当前页面路径做拼接。

额外优化 #

你当前的urls.py里存在重复的chapter路由配置：

path('chapter/<int:cid>/', views.view, name="chapter"),
path('chapter/<int:cid>', views.view, name="chapter"),

可以直接删除无末尾斜杠的第二条配置，Django默认开启APPEND_SLASH功能，会自动将没有末尾斜杠的请求重定向到带斜杠的路径，不需要冗余配置。

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