Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 287254b

Browse files
committed
update react-router v6
1 parent 835d53d commit 287254b

File tree

10 files changed

+204
-219
lines changed

10 files changed

+204
-219
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"react-dom": "^18.2.0",
2424
"react-redux": "^7.2.5",
2525
"react-router-cache-route": "^1.11.1",
26-
"react-router-dom": "^5.3.0",
26+
"react-router-dom": "^6.8.2",
2727
"react-use": "^17.3.1",
2828
"react-vcode": "1.0.11",
2929
"redux": "^4.1.1"

‎src/components/Bread/index.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
/** 通用动态面包屑 **/
22
import React, { useMemo } from "react";
3+
import {useLocation} from 'react-router-dom';
34
import { Breadcrumb } from "antd";
45
import { EnvironmentOutlined } from "@ant-design/icons";
56
import "./index.less";
67
import { Menu } from "@/models/index.type";
78

89
interface Props {
9-
location: Location;
1010
menus: Menu[];
1111
}
1212

1313
export default function BreadCom(props: Props): JSX.Element {
14+
const location = useLocation();
15+
1416
/** 根据当前location动态生成对应的面包屑 **/
1517
const breads = useMemo(() => {
16-
const paths: string = props.location.pathname;
18+
const paths: string = location.pathname;
1719
const breads: JSX.Element[] = [];
1820

1921
let parentId: number | null = null;
@@ -34,7 +36,7 @@ export default function BreadCom(props: Props): JSX.Element {
3436

3537
breads.reverse();
3638
return breads;
37-
}, [props.location.pathname, props.menus]);
39+
}, [location.pathname, props.menus]);
3840

3941
return (
4042
<div className="bread">

‎src/components/Menu/index.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
// ==================
66
import React, { useState, useEffect, useCallback, useMemo } from "react";
77
import { Layout, Menu as MenuAntd } from "antd";
8-
import { Link } from "react-router-dom";
8+
import { Link,useNavigate,useLocation } from "react-router-dom";
99
import { cloneDeep } from "lodash";
1010

1111
const { Sider } = Layout;
@@ -21,44 +21,42 @@ import Icon from "@/components/Icon";
2121
// ==================
2222
// 类型声明
2323
// ==================
24-
import { History } from "history";
2524
import { Menu } from "@/models/index.type";
2625

2726
interface Props {
2827
data: Menu[]; // 所有的菜单数据
2928
collapsed: boolean; // 菜单咱开还是收起
30-
history: History;
31-
location: Location;
3229
}
3330

3431
// ==================
3532
// 本组件
3633
// ==================
3734
export default function MenuCom(props: Props): JSX.Element {
35+
const navigate = useNavigate();
36+
const location = useLocation();
3837
const [chosedKey, setChosedKey] = useState<string[]>([]); // 当前选中
3938
const [openKeys, setOpenKeys] = useState<string[]>([]); // 当前需要被展开的项
4039

4140
// 当页面路由跳转时,即location发生改变,则更新选中项
4241
useEffect(() => {
43-
const paths = props.location.pathname.split("/").filter((item) => !!item);
44-
setChosedKey([props.location.pathname]);
42+
const paths = location.pathname.split("/").filter((item) => !!item);
43+
setChosedKey([location.pathname]);
4544
setOpenKeys(paths.map((item) => `/${item}`));
46-
}, [props.location]);
45+
}, [location]);
4746

4847
// ==================
4948
// 私有方法
5049
// ==================
5150

5251
// 菜单被选择
53-
const onSelect = useCallback(
54-
(e) => {
55-
props.history.push(e.key);
56-
},
57-
[props.history]
58-
);
52+
const onSelect = (e: any) => {
53+
if(e?.key){
54+
navigate(e.key);
55+
}
56+
}
5957

6058
// 工具 - 递归将扁平数据转换为层级数据
61-
const dataToJson = useCallback((one, data): Menu[] => {
59+
const dataToJson = useCallback((one: Menu|undefined, data: Menu[]): Menu[]|undefined => {
6260
let kids;
6361
if (!one) {
6462
// 第1次递归
@@ -67,7 +65,7 @@ export default function MenuCom(props: Props): JSX.Element {
6765
kids = data.filter((item: Menu) => item.parent === one.id);
6866
}
6967
kids.forEach((item: Menu) => (item.children = dataToJson(item, data)));
70-
return kids.length ? kids : null;
68+
return kids.length ? kids : undefined;
7169
}, []);
7270

7371
// 构建树结构
@@ -113,7 +111,7 @@ export default function MenuCom(props: Props): JSX.Element {
113111
d.sort((a, b) => {
114112
return a.sorts - b.sorts;
115113
});
116-
const sourceData: Menu[] = dataToJson(null, d) || [];
114+
const sourceData: Menu[] = dataToJson(undefined, d) || [];
117115
const treeDom = makeTreeDom(sourceData);
118116
return treeDom;
119117
}, [props.data, dataToJson, makeTreeDom]);

‎src/layouts/BasicLayout.tsx‎

Lines changed: 9 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
// ==================
66
import React, { useState, useCallback } from "react";
77
import { useSelector, useDispatch } from "react-redux";
8-
import { Route, Redirect } from "react-router-dom";
8+
import { Route, useNavigate,Outlet } from "react-router-dom";
99
import CacheRoute, { CacheSwitch } from "react-router-cache-route";
1010
import loadable from "@loadable/component";
1111
import { Layout, message } from "antd";
@@ -22,107 +22,39 @@ import "./BasicLayout.less";
2222
import Header from "@/components/Header";
2323
import MenuCom from "@/components/Menu";
2424
import Footer from "@/components/Footer";
25-
import Loading from "@/components/Loading";
26-
import ErrorBoundary from "@/components/ErrorBoundary";
2725

2826
import Bread from "@/components/Bread";
2927
//import BreadTab from "@/components/BreadTab"; // Tab方式的导航
3028

3129
const { Content } = Layout;
3230

33-
// ==================
34-
// 异步加载各路由模块
35-
// ==================
36-
const [NotFound, NoPower, Home, MenuAdmin, PowerAdmin, RoleAdmin, UserAdmin] = [
37-
() => import("../pages/ErrorPages/404"),
38-
() => import("../pages/ErrorPages/401"),
39-
() => import("../pages/Home"),
40-
() => import("../pages/System/MenuAdmin"),
41-
() => import("../pages/System/PowerAdmin"),
42-
() => import("../pages/System/RoleAdmin"),
43-
() => import("../pages/System/UserAdmin"),
44-
].map((item) => {
45-
return loadable(item as any, {
46-
fallback: <Loading />,
47-
});
48-
});
49-
5031
// ==================
5132
// 类型声明
5233
// ==================
5334
import type { RootState, Dispatch } from "@/store";
5435
import type { Menu } from "@/models/index.type";
5536
import type { History } from "history";
56-
import type { RouteComponentProps } from "react-router-dom";
57-
58-
type Props = {
59-
history: History;
60-
location: Location;
61-
};
6237

6338
// ==================
6439
// 本组件
6540
// ==================
66-
function BasicLayoutCom(props: Props): JSX.Element {
41+
function BasicLayoutCom(): JSX.Element {
6742
const dispatch = useDispatch<Dispatch>();
43+
const navigate = useNavigate();
6844
const userinfo = useSelector((state: RootState) => state.app.userinfo);
6945
const [collapsed, setCollapsed] = useState(false); // 菜单栏是否收起
7046

7147
// 退出登录
72-
const onLogout = useCallback(() => {
48+
const onLogout = () => {
7349
dispatch.app.onLogout().then(() => {
7450
message.success("退出成功");
75-
props.history.push("/user/login");
51+
navigate("/user/login");
7652
});
77-
}, [props, dispatch.app]);
78-
79-
/**
80-
* 工具 - 判断当前用户是否有该路由权限,如果没有就跳转至401页
81-
* @param pathname 路由路径
82-
* **/
83-
const checkRouterPower = useCallback(
84-
(pathname: string) => {
85-
let menus: Menu[] = [];
86-
if (userinfo.menus && userinfo.menus.length) {
87-
menus = userinfo.menus;
88-
} else if (sessionStorage.getItem("userinfo")) {
89-
menus = JSON.parse(
90-
tools.uncompile(sessionStorage.getItem("userinfo") || "[]")
91-
).menus;
92-
}
93-
const m: string[] = menus.map((item) => item.url); // 当前用户拥有的所有菜单
94-
95-
if (m.includes(pathname)) {
96-
return true;
97-
}
98-
return false;
99-
},
100-
[userinfo]
101-
);
102-
103-
// 切换路由时触发
104-
const onEnter = useCallback(
105-
(Component, props: RouteComponentProps) => {
106-
/**
107-
* 检查当前用户是否有该路由页面的权限
108-
* 没有则跳转至401页
109-
* **/
110-
if (checkRouterPower(props.location.pathname)) {
111-
return <Component {...props} />;
112-
}
113-
return <Redirect to="/nopower" />;
114-
},
115-
[checkRouterPower]
116-
);
53+
};
11754

11855
return (
11956
<Layout className="page-basic" hasSider>
120-
<MenuCom
121-
data={userinfo.menus}
122-
collapsed={collapsed}
123-
location={props.location}
124-
history={props.history}
125-
/>
57+
<MenuCom data={userinfo.menus} collapsed={collapsed} />
12658

12759
<Layout>
12860
<Header
@@ -132,48 +64,15 @@ function BasicLayoutCom(props: Props): JSX.Element {
13264
onLogout={onLogout}
13365
/>
13466
{/* 普通面包屑导航 */}
135-
<Bread menus={userinfo.menus} location={props.location}/>
67+
<Bread menus={userinfo.menus} />
13668
{/* Tab方式的导航 */}
13769
{/* <BreadTab
13870
menus={userinfo.menus}
13971
location={props.location}
14072
history={props.history}
14173
/> */}
14274
<Content className="content">
143-
<ErrorBoundary location={props.location}>
144-
<CacheSwitch>
145-
<Redirect exact from="/" to="/home" />
146-
<Route
147-
exact
148-
path="/home"
149-
render={(props) => onEnter(Home, props)}
150-
/>
151-
152-
<Route
153-
exact
154-
path="/system/menuadmin"
155-
render={(props) => onEnter(MenuAdmin, props)}
156-
/>
157-
<Route
158-
exact
159-
path="/system/poweradmin"
160-
render={(props) => onEnter(PowerAdmin, props)}
161-
/>
162-
<Route
163-
exact
164-
path="/system/roleadmin"
165-
render={(props) => onEnter(RoleAdmin, props)}
166-
/>
167-
{/*<!-- 使用CacheRoute可以缓存该页面,类似Keep-alive -->*/}
168-
<CacheRoute
169-
exact
170-
path="/system/useradmin"
171-
render={(props) => onEnter(UserAdmin, props)}
172-
/>
173-
<Route exact path="/nopower" component={NoPower} />
174-
<Route component={NotFound} />
175-
</CacheSwitch>
176-
</ErrorBoundary>
75+
<Outlet />
17776
</Content>
17877
<Footer />
17978
</Layout>

‎src/layouts/UserLayout.tsx‎

Lines changed: 5 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,67 +5,35 @@
55
// ==================
66
import React from "react";
77
import { useSelector } from "react-redux";
8-
import loadable from "@loadable/component";
9-
import { Route, Switch, Redirect } from "react-router-dom";
8+
import { Outlet } from "react-router-dom";
109
import { Layout } from "antd";
1110

1211
// ==================
1312
// 自定义的东西
1413
// ==================
1514
import "./UserLayout.less";
1615

17-
// ==================
18-
// 类型声明
19-
// ==================
20-
import type { RootState } from "@/store";
21-
import type { RouteComponentProps } from "react-router-dom";
22-
2316
// ==================
2417
// 组件
2518
// ==================
26-
importLoadingfrom"../components/Loading";
19+
2720
import Footer from "../components/Footer";
2821

2922
const { Content } = Layout;
3023

3124
// ==================
32-
// 异步加载各路由模块
25+
// 类型声明
3326
// ==================
34-
const [NotFound, Login] = [
35-
() => import("../pages/ErrorPages/404"),
36-
() => import("../pages/Login"),
37-
].map((item) => {
38-
return loadable(item, {
39-
fallback: <Loading />,
40-
});
41-
});
27+
import type { RootState } from "@/store";
4228

4329
// ==================
4430
// 本组件
4531
// ==================
4632
export default function AppContainer(): JSX.Element {
47-
const userinfo = useSelector((state: RootState) => state.app.userinfo);
48-
49-
// 切换路由时触发
50-
const onEnter = (Component: any, props: RouteComponentProps) => {
51-
if (userinfo.userBasicInfo) {
52-
return <Redirect to="/home" />;
53-
}
54-
return <Component {...props} />;
55-
};
56-
5733
return (
5834
<Layout className="page-user">
5935
<Content className="content">
60-
<Switch>
61-
<Redirect exact from="/user" to="/user/login" />
62-
<Route
63-
exact
64-
path="/user/login"
65-
render={(props) => onEnter(Login, props)}
66-
/>
67-
<Route component={NotFound} />
68-
</Switch>
36+
<Outlet />
6937
</Content>
7038
<Footer className="user-layout" />
7139
</Layout>

‎src/main.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import ReactDOM from "react-dom/client";
3+
import { HashRouter } from "react-router-dom";
34
import { Provider } from "react-redux";
45
import store from "./store";
56
import Router from "./router";
@@ -11,7 +12,9 @@ import "@/assets/styles/global.less";
1112
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
1213
<React.StrictMode>
1314
<Provider store={store}>
14-
<Router />
15+
<HashRouter>
16+
<Router />
17+
</HashRouter>
1518
</Provider>
1619
</React.StrictMode>
1720
);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /