Bootstrap

部署到github-pages后, 切换路由,前端路由缺失github上的项目名【已解决】

预备知识:

一、编程式路由导航有哪些方法

1. 在组件内部:

  • useNavigate() // v6
  • usehistory() 然后 history.push // v5
  • withrouter 方法包裹组件 然后 history.push // v5 。且不建议使用

2. 组件外部 :

  • window.location.href // browserRouter
  • window.location.hash // hashRouter

二、两种路由方式的区别

在这里插入图片描述
其中,服务器配置具体指:需要服务端的支持,以正确处理客户端发出的所有URL请求,通常需要配置服务器,将所有请求重定向到单页应用的入口文件(通常是index.html)。
我们以nginx为例,需要如下配置
在这里插入图片描述


言归正传

一、问题描述:

点击导航栏的某个按钮。路由跳转。但是如下图。
在这里插入图片描述
解决措施参考:点击

方法1:使用browserRouter 且 使用basename

  1. 直接使用 browserRouter。同时注意修改【组件外】 【编程式路由导航】如下图step2所示。
    在这里插入图片描述
  2. 其他位置(比如路由表、组件内的编程式路由导航)是不需要修改的。
  3. 且此方法部署后,刷新页面,会404.

在这里插入图片描述

原因:使用此方法,页面刷新,没有后端支持的路由 URI 会被 github pages 当做真实的地址去请求资源,从而导致被引导到 github 的404 页面。Github Pages无法处理history模式的前端路由。

解决方法参考:解决措施
或者 直接用hash模式

方法2:使用hashRouter

  1. 直接使用 hashRouter。同时注意修改【组件外】 【编程式路由导航】如下图step2所示。

  2. 其他位置(比如路由表、组件内的编程式路由导航)是不需要修改的。

  3. 且此方法部署后,刷新页面,不会404.
    在这里插入图片描述

;