Skip to content

Commit 85b6ffb

Browse files
introvert-yintrovert-y
committed
update
1 parent a7fc4e0 commit 85b6ffb

File tree

4 files changed

+133
-80
lines changed

4 files changed

+133
-80
lines changed

‎.eslintignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
# service-landing/src/views/RealName.vue
44
serviceWorker.js
55
history.js
6-
src/router/index.js
76
src/page/echartBox/index.js
87
src/page/heightEchart/index.js
98
src/page/chinaMap/index.js

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
"react-dom": "^16.9.0",
5656
"react-redux": "^7.1.1",
5757
"react-router": "^5.1.2",
58+
"react-router-dom": "^5.1.2",
5859
"react-transition-group": "^4.3.0",
5960
"redux": "^4.0.4",
6061
"redux-logger": "^3.0.6",
@@ -175,7 +176,8 @@
175176
"husky": "^3.1.0",
176177
"lint-staged": "^9.4.3",
177178
"prettier": "1.19.1",
178-
"pretty-quick": "^2.0.1"
179+
"pretty-quick": "^2.0.1",
180+
"react-router-dom": "^5.1.2"
179181
},
180182
"proxy": "http://193.112.220.108:8080"
181183
}

‎src/router/index.js

Lines changed: 116 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
11
// 如何实现一个react-router路由拦截（导航守卫） https://juejin.im/post/5c31aede6fb9a04a0d570107
2-
import React from 'react';
3-
import { BrowserRouter, HashRouter, Route, Link,Switch } from 'react-router-dom';
2+
import React from "react";
3+
import { HashRouter, Route, Link, Switch } from "react-router-dom";
44
// import { browserHistory, Router} from 'react-router';
5-
import {
6-
Modal, message,
7-
} from 'antd';
8-
import Home from '../page/CssTest/index';
9-
import history from '../history';
10-
import Counter from '../page/Counter/index';
11-
import Optimize from '../page/Optimize/index';
12-
import EchartBox from '../page/echartBox/index';
13-
import ChinaMap from '../page/chinaMap/index';
14-
import UseMemo from '../page/useMemo/index';
15-
import UseCallback from '../page/useCallback/index';
16-
import Memo from '../page/memoParent/index';
17-
import HeightEchart from '../page/heightEchart/index';
18-
import FormBox from '../page/form/index';
19-
import PromiseTest from '../page/promise/index';
5+
import { Modal, message } from "antd";
6+
import PropTypes from "prop-types";
7+
import Home from "../page/CssTest/index";
8+
import history from "../history";
9+
import Counter from "../page/Counter/index";
10+
import Optimize from "../page/Optimize/index";
11+
import EchartBox from "../page/echartBox/index";
12+
import ChinaMap from "../page/chinaMap/index";
13+
import UseMemo from "../page/useMemo/index";
14+
import UseCallback from "../page/useCallback/index";
15+
import Memo from "../page/memoParent/index";
16+
import HeightEchart from "../page/heightEchart/index";
17+
import FormBox from "../page/form/index";
18+
import PromiseTest from "../page/promise/index";
2019

2120
/**
2221
* 解决ant-design的路由跳转，modal和message组件不关闭问题
@@ -35,7 +34,7 @@ function Header() {
3534
echart
3635
<ul>
3736
<li>
38-
<Link to="/echart">echart的简单应用</Link>
37+
<Link to="/echart">echart的简单应用</Link>
3938
</li>
4039
<li>
4140
<Link to="/map">echart实现中国地图并实现图层叠加</Link>
@@ -49,31 +48,57 @@ function Header() {
4948
react-router(可打开控制台观察数据的变化)
5049
<ul>
5150
<li>
52-
<Link to={{ pathname:"/query", query: { name: 'Anny', time: '2', obj: JSON.stringify({
53-
name: 'IG',
54-
sex: 'man',
55-
})}}}>路由query传参</Link>
51+
<Link
52+
to={{
53+
pathname: "/query",
54+
query: {
55+
name: "Anny",
56+
time: "2",
57+
obj: JSON.stringify({
58+
name: "IG",
59+
sex: "man"
60+
})
61+
}
62+
}}
63+
>
64+
路由query传参
65+
</Link>
5666
</li>
5767
<li>
58-
<Link to={`/link?data=${encodeURIComponent(JSON.stringify({
59-
name: 'IG',
60-
sex: 'man',
61-
}))}`}>
68+
<Link
69+
to={`/link?data=${encodeURIComponent(
70+
JSON.stringify({
71+
name: "IG",
72+
sex: "man"
73+
})
74+
)}`}
75+
>
6276
路由Link to传一个对象，并url加密
6377
</Link>
6478
</li>
6579
<li>
66-
<Link to={{ pathname:"/params" , params: { name: 'Ming', year:'18', obj: JSON.stringify({
67-
name: 'IG',
68-
sex: 'man',
69-
})} }}>路由params传参</Link>
80+
<Link
81+
to={{
82+
pathname: "/params",
83+
params: {
84+
name: "Ming",
85+
year: "18",
86+
obj: JSON.stringify({
87+
name: "IG",
88+
sex: "man"
89+
})
90+
}
91+
}}
92+
>
93+
路由params传参
94+
</Link>
7095
</li>
7196
<li>
7297
<Link to="/queryChildren">嵌套路由</Link>
7398
</li>
7499
</ul>
75100
</li>
76-
101+
77102
<li>
78103
<Link to="/counter">react-redux的应用和异步流</Link>
79104
</li>
@@ -99,66 +124,39 @@ function Header() {
99124
);
100125
}
101126

102-
function App() {
103-
return (
104-
// basename 为路由前添加前缀
105-
// <BrowserRouter basename={'/douyu'}>
106-
<HashRouter >
107-
<div style={{ marginLeft: 40 }}>
108-
<Header />
109-
<Switch>
110-
<Route exact path="/" component={Home} />
111-
<Route path="/query" component={RouteQuery} />
112-
<Route path="/link" component={RouteLink} />
113-
<Route path="/params" component={RouteParams} />
114-
<Route path="/queryChildren" component={QueryChildren} />
115-
<Route path="/counter" component={Counter} />
116-
<Route path="/optimize" component={Optimize} />
117-
<Route path="/echart" component={EchartBox} />
118-
<Route path="/map" component={ChinaMap} />
119-
<Route path="/useMemo" component={UseMemo} />
120-
<Route path="/useCallback" component={UseCallback} />
121-
<Route path="/memo" component={Memo} />
122-
<Route path="/heightEchart" component={HeightEchart} />
123-
<Route path="/form" component={FormBox} />
124-
<Route path="/testPromise" component={PromiseTest} />
125-
</Switch>
126-
</div>
127-
</HashRouter>
128-
);
129-
}
130-
131127
function RouteLink({ location }) {
132-
console.log(JSON.parse(new URLSearchParams(location.search).get('data')));
133-
if (!location.search ) {
134-
return 'No Click';
128+
console.log(JSON.parse(new URLSearchParams(location.search).get("data")));
129+
if (!location.search) {
130+
return "No Click";
135131
}
136-
const data = JSON.parse(new URLSearchParams(location.search).get('data'));
137-
return Object.keys(data).map((item) => (
132+
const data = JSON.parse(new URLSearchParams(location.search).get("data"));
133+
return Object.keys(data).map(item => (
138134
<div key={item}>
139135
{item} : {data[item]}
140136
</div>
141-
))
137+
));
142138
}
143139

144140
function RouteQuery({ location }) {
145-
console.log('query传参', location);
146-
return (<h2>About: { location.query ? `name：${location.query.name}, time: ${location.query.time}` : 'No Click' }</h2>);
141+
console.log("query传参", location);
142+
return <h2>About: {location.query ? `name：${location.query.name}, time: ${location.query.time}` : "No Click"}</h2>;
147143
}
148144

149-
function RouteParams({location}) {
150-
console.log('params传参', location);
151-
return (<h2>试一下: {location.params ? `name为${location.params.name}, year为${location.params.year}` : 'No Click' }</h2>);
145+
function RouteParams({ location }) {
146+
console.log("params传参", location);
147+
return (
148+
<h2>试一下: {location.params ? `name为${location.params.name}, year为${location.params.year}` : "No Click"}</h2>
149+
);
152150
}
153151

154-
155152
function SonQuery({ location }) {
156-
console.log('嵌套路由', location);
153+
console.log("嵌套路由", location);
157154
if (location.query) {
158155
return location.query.name;
159-
} else if (location.params) {
156+
}
157+
if (location.params) {
160158
return location.params.name;
161-
}
159+
}
162160
return <h3> No Click</h3>;
163161
}
164162

@@ -168,10 +166,10 @@ function QueryChildren({ match }) {
168166
<h2>嵌套路由</h2>
169167
<ul>
170168
<li>
171-
<Link to={{ pathname:`${match.path}/apple` , query: { name: '苹果' } }}>苹果</Link>
169+
<Link to={{ pathname: `${match.path}/apple`, query: { name: "苹果" } }}>苹果</Link>
172170
</li>
173171
<li>
174-
<Link to={{ pathname:`${match.path}/putao`, params: { name: '葡萄' } }}>葡萄</Link>
172+
<Link to={{ pathname: `${match.path}/putao`, params: { name: "葡萄" } }}>葡萄</Link>
175173
</li>
176174
</ul>
177175
<Switch>
@@ -182,4 +180,45 @@ function QueryChildren({ match }) {
182180
);
183181
}
184182

183+
function App() {
184+
return (
185+
// basename 为路由前添加前缀
186+
// <BrowserRouter basename={'/douyu'}>
187+
<HashRouter>
188+
<div style={{ marginLeft: 40 }}>
189+
<Header />
190+
<Switch>
191+
<Route exact path="/" component={Home} />
192+
<Route path="/query" component={RouteQuery} />
193+
<Route path="/link" component={RouteLink} />
194+
<Route path="/params" component={RouteParams} />
195+
<Route path="/queryChildren" component={QueryChildren} />
196+
<Route path="/counter" component={Counter} />
197+
<Route path="/optimize" component={Optimize} />
198+
<Route path="/echart" component={EchartBox} />
199+
<Route path="/map" component={ChinaMap} />
200+
<Route path="/useMemo" component={UseMemo} />
201+
<Route path="/useCallback" component={UseCallback} />
202+
<Route path="/memo" component={Memo} />
203+
<Route path="/heightEchart" component={HeightEchart} />
204+
<Route path="/form" component={FormBox} />
205+
<Route path="/testPromise" component={PromiseTest} />
206+
</Switch>
207+
</div>
208+
</HashRouter>
209+
);
210+
}
211+
212+
RouteParams.propTypes = {
213+
location: PropTypes.object.isRequired
214+
};
215+
SonQuery.propTypes = {
216+
location: PropTypes.object.isRequired
217+
};
218+
RouteQuery.propTypes = {
219+
location: PropTypes.object.isRequired
220+
};
221+
QueryChildren.propTypes = {
222+
match: PropTypes.object.isRequired
223+
};
185224
export default App;

‎yarn.lock

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9650,7 +9650,20 @@ react-redux@^7.1.1:
96509650
prop-types "^15.7.2"
96519651
react-is "^16.9.0"
96529652

9653-
react-router@^5.1.2:
9653+
react-router-dom@^5.1.2:
9654+
version "5.1.2"
9655+
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
9656+
integrity sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==
9657+
dependencies:
9658+
"@babel/runtime" "^7.1.2"
9659+
history "^4.9.0"
9660+
loose-envify "^1.3.1"
9661+
prop-types "^15.6.2"
9662+
react-router "5.1.2"
9663+
tiny-invariant "^1.0.2"
9664+
tiny-warning "^1.0.0"
9665+
9666+
[email protected], react-router@^5.1.2:
96549667
version "5.1.2"
96559668
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.2.tgz#6ea51d789cb36a6be1ba5f7c0d48dd9e817d3418"
96569669
integrity sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==

0 commit comments

Comments
 (0)