React 使用两种路由（hash|history）模式 调用实例 createHashHistory、createBrowserHistory 实现跳转页面

一、组件props跳转路由

路由嵌套后我们就可以在嵌套的子组件中使用 props 去调用 history 实现路由跳转

如下

// 跳转登录页
props.history.push("/login")

二、在 request.ts 无法获取到 props 的页面调用路由实例实现路由跳转

首先我们还是要分清我们的路由模式

hash（#）: <HashRouter>	history（/）: <BrowserRouter>
createHashHistory	createBrowserHistory

两个路由各调用两个实例

首先引入

import { createHashHistory,createBrowserHistory } from "history";
// 声明
const customHash = createHashHistory();
const customBrowser = createBrowserHistory();
// 各自跳转方法
customHash.push("/login");
customBrowser.push('/login');

2.1、hash示例

request.ts

响应拦截器处设置路由跳转

2.2、history实例

request.ts


切记两种引入不可混淆需要搭配使用，否则会导致 url 地址变化，页面不变化。