react二次封装history路由，在非组件的ts中也可以直接使用路由跳转。

1.新建 src/utils/history.ts

//导入history  简单理解createHashHistory的路由地址带#,createBrowserHistory不带

import { createHashHistory } from "history";
const history = createHashHistory();
export default history;

//下面的函数是获取地址栏参数，可以不需要
//比如/login?id=1&name=3,会返回{id:1,name:3}

export const urlParameter = (data: string) => {
  if (data) {
    const query = data.substring(data.indexOf("?") + 1);
    const arr = query.split("&");
    const params = {} as any;
    arr.forEach((v) => {
      const key = v.substring(0, v.indexOf("="));
      const val = v.substring(v.indexOf("=") + 1);
      params[key] = val;
    });
    return params;
  } else return {};
};

2.使用。在tsx函数组件中，或者ts文件中都可以直接使用

//导入
import history from "@/utils/history";
//可以使用 push，go等所有路由跳转方式
history.push(path);

记得在根组件路由中传入（第一级路由）

App.tsx中

    import history from "./utils/history";

    export default function App() {
        return (
         {/* 关于路由 */}
      
           {/* 核心代码 */}
          <Router history={history}>
           {/* 核心代码 */}
      
            <React.Suspense fallback={<SpinLoding />}>
              <Switch>
                <Route path="/login" component={Login} />
                <AuthRoute path="/" component={Layout} />
              </Switch>
            </React.Suspense>
          </Router>
        )
    }