Skip to content

Commit 40d4fbf

Browse files
coderInwindcoderInwind
committed
路由模块
1 parent 4a3ae4f commit 40d4fbf

File tree

11 files changed

+87
-9
lines changed

11 files changed

+87
-9
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"normalize.css": "^8.0.1",
1010
"react": "^17.0.2",
1111
"react-dom": "^17.0.2",
12+
"react-router-dom": "^6.2.2",
1213
"react-scripts": "5.0.0",
1314
"styled-components": "^5.3.3",
1415
"web-vitals": "^2.1.4"

‎public/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,11 @@
99
name="description"
1010
content="Web site created using create-react-app"
1111
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
12+
1313
<!--
1414
manifest.json provides metadata used when your web app is installed on a
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1616
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
1817
<!--
1918
Notice the use of %PUBLIC_URL% in the tags above.
2019
It will be replaced with the URL of the `public` folder during the build.

‎src/App.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React, { memo } from "react";
2-
import Login from "./pages/Login";
2+
3+
import RouterRender from "./router";
4+
import { BrowserRouter } from "react-router-dom";
35

46
const App = memo(() => {
57
return (
6-
<div>
7-
<Login />
8-
</div>
8+
<BrowserRouter>
9+
<RouterRender />
10+
</BrowserRouter>
911
);
1012
});
1113

‎src/pages/Index/index.js

Whitespace-only changes.

‎src/pages/Index/style.js

Whitespace-only changes.

‎src/pages/Login/index.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
import React, { memo } from "react";
22
import { LoginWrapper } from "./style";
33

4+
import { useNavigate } from "react-router-dom";
5+
46
const Login = memo(() => {
5-
return <LoginWrapper>Login</LoginWrapper>;
7+
const navigate = useNavigate();
8+
9+
const loginIn = () => {
10+
navigate("/task");
11+
};
12+
13+
return <LoginWrapper onClick={loginIn}>Start App</LoginWrapper>;
614
});
715

816
export default Login;

‎src/pages/Login/style.js

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
11
import styled from "styled-components";
22

3-
export const LoginWrapper = styled.div``;
3+
export const LoginWrapper = styled.div`
4+
width: 250px;
5+
height: 50px;
6+
background-color: #f2cdce;
7+
text-align: center;
8+
line-height: 50px;
9+
margin-left: 50%;
10+
margin-top: 50vh;
11+
transform: translateX(-50%);
12+
cursor: pointer;
13+
14+
&:hover {
15+
background-color: #f69c9f;
16+
}
17+
`;

‎src/pages/Task/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React, { memo } from "react";
2+
import { TaskWrapper } from "./style";
3+
4+
const Task = memo(() => {
5+
return <TaskWrapper>Task</TaskWrapper>;
6+
});
7+
8+
export default Task;

‎src/pages/Task/style.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import styled from "styled-components";
2+
3+
export const TaskWrapper = styled.div``;

‎src/router/index.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React, { memo } from "react";
2+
import { useRoutes } from "react-router-dom";
3+
import Login from "../pages/Login";
4+
import Task from "../pages/Task";
5+
6+
const RouterRender = memo(() => {
7+
const routes = useRoutes([
8+
{
9+
path: "/",
10+
element: <Login />,
11+
},
12+
{
13+
path: "/task",
14+
element: <Task />,
15+
},
16+
]);
17+
18+
return routes;
19+
});
20+
21+
export default RouterRender;

‎yarn.lock

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1024,7 +1024,7 @@
10241024
core-js-pure "^3.20.2"
10251025
regenerator-runtime "^0.13.4"
10261026

1027-
"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
1027+
"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
10281028
version "7.17.2"
10291029
resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
10301030
integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
@@ -4550,6 +4550,13 @@ he@^1.2.0:
45504550
resolved "https://registry.npmmirror.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
45514551
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
45524552

4553+
history@^5.2.0:
4554+
version "5.3.0"
4555+
resolved "https://registry.npmmirror.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
4556+
integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
4557+
dependencies:
4558+
"@babel/runtime" "^7.7.6"
4559+
45534560
hoist-non-react-statics@^3.0.0:
45544561
version "3.3.2"
45554562
resolved "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -7120,6 +7127,21 @@ react-refresh@^0.11.0:
71207127
resolved "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
71217128
integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
71227129

7130+
react-router-dom@^6.2.2:
7131+
version "6.2.2"
7132+
resolved "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.2.2.tgz#f1a2c88365593c76b9612ae80154a13fcb72e442"
7133+
integrity sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==
7134+
dependencies:
7135+
history "^5.2.0"
7136+
react-router "6.2.2"
7137+
7138+
react-router@6.2.2:
7139+
version "6.2.2"
7140+
resolved "https://registry.npmmirror.com/react-router/-/react-router-6.2.2.tgz#495e683a0c04461eeb3d705fe445d6cf42f0c249"
7141+
integrity sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==
7142+
dependencies:
7143+
history "^5.2.0"
7144+
71237145
react-scripts@5.0.0:
71247146
version "5.0.0"
71257147
resolved "https://registry.npmmirror.com/react-scripts/-/react-scripts-5.0.0.tgz#6547a6d7f8b64364ef95273767466cc577cb4b60"

0 commit comments

Comments
 (0)