황선혁 / weather_chatbot

Go to a project
Toggle navigation Toggle navigation pinning
Eric Whale
f60a10fb 1 parent f9ac65e5

Add routes using react-router package

Inline Side-by-side
Showing 11 changed files with 143 additions and 57 deletions
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
13 "@testing-library/user-event": "^13.5.0", 13 "@testing-library/user-event": "^13.5.0",
14 "react": "^18.1.0", 14 "react": "^18.1.0",
15 "react-dom": "^18.1.0", 15 "react-dom": "^18.1.0",
16 + "react-router-dom": "^6.3.0",
16 "react-scripts": "5.0.1", 17 "react-scripts": "5.0.1",
17 "web-vitals": "^2.1.4" 18 "web-vitals": "^2.1.4"
18 } 19 }
...@@ -8061,6 +8062,14 @@ ...@@ -8061,6 +8062,14 @@
8061 "he": "bin/he" 8062 "he": "bin/he"
8062 } 8063 }
8063 }, 8064 },
8065 + "node_modules/history": {
8066 + "version": "5.3.0",
8067 + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
8068 + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
8069 + "dependencies": {
8070 + "@babel/runtime": "^7.7.6"
8071 + }
8072 + },
8064 "node_modules/hoopy": { 8073 "node_modules/hoopy": {
8065 "version": "0.1.4", 8074 "version": "0.1.4",
8066 "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", 8075 "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
...@@ -13462,6 +13471,30 @@ ...@@ -13462,6 +13471,30 @@
13462 "node": ">=0.10.0" 13471 "node": ">=0.10.0"
13463 } 13472 }
13464 }, 13473 },
13474 + "node_modules/react-router": {
13475 + "version": "6.3.0",
13476 + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
13477 + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
13478 + "dependencies": {
13479 + "history": "^5.2.0"
13480 + },
13481 + "peerDependencies": {
13482 + "react": ">=16.8"
13483 + }
13484 + },
13485 + "node_modules/react-router-dom": {
13486 + "version": "6.3.0",
13487 + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
13488 + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
13489 + "dependencies": {
13490 + "history": "^5.2.0",
13491 + "react-router": "6.3.0"
13492 + },
13493 + "peerDependencies": {
13494 + "react": ">=16.8",
13495 + "react-dom": ">=16.8"
13496 + }
13497 + },
13465 "node_modules/react-scripts": { 13498 "node_modules/react-scripts": {
13466 "version": "5.0.1", 13499 "version": "5.0.1",
13467 "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", 13500 "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
...@@ -21987,6 +22020,14 @@ ...@@ -21987,6 +22020,14 @@
21987 "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", 22020 "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
21988 "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" 22021 "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
21989 }, 22022 },
22023 + "history": {
22024 + "version": "5.3.0",
22025 + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
22026 + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
22027 + "requires": {
22028 + "@babel/runtime": "^7.7.6"
22029 + }
22030 + },
21990 "hoopy": { 22031 "hoopy": {
21991 "version": "0.1.4", 22032 "version": "0.1.4",
21992 "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", 22033 "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
...@@ -25751,6 +25792,23 @@ ...@@ -25751,6 +25792,23 @@
25751 "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", 25792 "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
25752 "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" 25793 "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
25753 }, 25794 },
25795 + "react-router": {
25796 + "version": "6.3.0",
25797 + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
25798 + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
25799 + "requires": {
25800 + "history": "^5.2.0"
25801 + }
25802 + },
25803 + "react-router-dom": {
25804 + "version": "6.3.0",
25805 + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
25806 + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
25807 + "requires": {
25808 + "history": "^5.2.0",
25809 + "react-router": "6.3.0"
25810 + }
25811 + },
25754 "react-scripts": { 25812 "react-scripts": {
25755 "version": "5.0.1", 25813 "version": "5.0.1",
25756 "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", 25814 "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
8 "@testing-library/user-event": "^13.5.0", 8 "@testing-library/user-event": "^13.5.0",
9 "react": "^18.1.0", 9 "react": "^18.1.0",
10 "react-dom": "^18.1.0", 10 "react-dom": "^18.1.0",
11 + "react-router-dom": "^6.3.0",
11 "react-scripts": "5.0.1", 12 "react-scripts": "5.0.1",
12 "web-vitals": "^2.1.4" 13 "web-vitals": "^2.1.4"
13 }, 14 },
......
1 .App { 1 .App {
2 text-align: center; 2 text-align: center;
3 } 3 }
4 -
5 -.App-logo {
6 - height: 40vmin;
7 - pointer-events: none;
8 -}
9 -
10 -@media (prefers-reduced-motion: no-preference) {
11 - .App-logo {
12 - animation: App-logo-spin infinite 20s linear;
13 - }
14 -}
15 -
16 -.App-header {
17 - background-color: #282c34;
18 - min-height: 100vh;
19 - display: flex;
20 - flex-direction: column;
21 - align-items: center;
22 - justify-content: center;
23 - font-size: calc(10px + 2vmin);
24 - color: white;
25 -}
26 -
27 -.App-link {
28 - color: #61dafb;
29 -}
30 -
31 -@keyframes App-logo-spin {
32 - from {
33 - transform: rotate(0deg);
34 - }
35 - to {
36 - transform: rotate(360deg);
37 - }
38 -}
......
1 +import { Link, Outlet } from "react-router-dom";
1 import "./App.css"; 2 import "./App.css";
2 3
3 function App() { 4 function App() {
4 return ( 5 return (
5 <div className="App"> 6 <div className="App">
6 <h1>Welcome to weather-chatbot</h1> 7 <h1>Welcome to weather-chatbot</h1>
8 + <nav
9 + style={{
10 + borderBottom: "solid 1px",
11 + paddingBottom: "1rem",
12 + }}
13 + >
14 + <Link to="/login">login</Link> | <Link to="/signup">signup</Link>
15 + <br />
16 + <Link to="/chatroom">Chatroom</Link> |{" "}
17 + <Link to="/userroom">Userroom</Link>
18 + <br />
19 + <Link to="/settings">Settings</Link>
20 + </nav>
21 + <Outlet />
7 </div> 22 </div>
8 ); 23 );
9 } 24 }
......
1 -body {
2 - margin: 0;
3 - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 - sans-serif;
6 - -webkit-font-smoothing: antialiased;
7 - -moz-osx-font-smoothing: grayscale;
8 -}
9 -
10 -code {
11 - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 - monospace;
13 -}
1 -import React from 'react'; 1 +import React from "react";
2 -import ReactDOM from 'react-dom/client'; 2 +import ReactDOM from "react-dom/client";
3 -import './index.css'; 3 +import { BrowserRouter, Routes, Route } from "react-router-dom";
4 -import App from './App'; 4 +import reportWebVitals from "./reportWebVitals";
5 -import reportWebVitals from './reportWebVitals'; 5 +import App from "./App";
6 +// routes
7 +import Signup from "./routes/signup";
8 +import Login from "./routes/login";
9 +import Chatroom from "./routes/chatroom";
10 +import Userroom from "./routes/userroom";
11 +import Settings from "./routes/settings";
12 +
13 +const root = ReactDOM.createRoot(document.getElementById("root"));
6 14
7 -const root = ReactDOM.createRoot(document.getElementById('root'));
8 root.render( 15 root.render(
9 - <React.StrictMode> 16 + <BrowserRouter>
10 - <App /> 17 + <Routes>
11 - </React.StrictMode> 18 + <Route path="/" element={<App />}>
19 + <Route path="/chatroom" element={<Chatroom />} />
20 + <Route path="/userroom" element={<Userroom />} />
21 + <Route path="/settings" element={<Settings />} />
22 + </Route>
23 + <Route path="/login" element={<Login />} />
24 + <Route path="/signup" element={<Signup />} />
25 + </Routes>
26 + </BrowserRouter>
12 ); 27 );
13 28
14 // If you want to start measuring performance in your app, pass a function 29 // If you want to start measuring performance in your app, pass a function
......
1 +function Chatroom() {
2 + return (
3 + <div>
4 + <h1>Chatroom page</h1>
5 + </div>
6 + );
7 +}
8 +
9 +export default Chatroom;
1 +function Login() {
2 + return (
3 + <div>
4 + <h1>Login page</h1>
5 + </div>
6 + );
7 +}
8 +
9 +export default Login;
1 +function Settings() {
2 + return (
3 + <div>
4 + <h1>Settings page</h1>
5 + </div>
6 + );
7 +}
8 +
9 +export default Settings;
1 +function Signup() {
2 + return (
3 + <div>
4 + <h1>Signup page</h1>
5 + </div>
6 + );
7 +}
8 +
9 +export default Signup;
1 +function Userroom() {
2 + return (
3 + <div>
4 + <h1>Userroom page</h1>
5 + </div>
6 + );
7 +}
8 +
9 +export default Userroom;