teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

Routing.jsxの追加

2021/04/02 23:53

投稿

gozikyu
gozikyu

スコア4

title CHANGED
File without changes
body CHANGED
@@ -13,4 +13,163 @@
13
13
 
14
14
  ご知見ある方いらっしゃいましたらアドバイスいただけると幸いです。
15
15
 
16
- よろしくお願いいたします。
16
+ よろしくお願いいたします。
17
+
18
+ 【追記】
19
+ Switchの使い方に問題があるとコメント頂いたので、Switchを使っているRouting.jsxを以下に記載します。
20
+ Switchのつかいかたのどこに問題があるのか、まだ理解しきれていないので、現在Switch関連を重点的に調査しております。
21
+
22
+ コードを見て、アドバイスがありましたら、ご指摘いただけると幸いです。
23
+
24
+ Routing.jsx
25
+ ```ここに言語を入力
26
+ import React, { useEffect, useState } from "react";
27
+ import {
28
+ BrowserRouter as Router,
29
+ Route,
30
+ Switch,
31
+ useHistory,
32
+ Redirect,
33
+ } from "react-router-dom";
34
+ import axios from "axios";
35
+ import TopPage from "./Components/Page/TopPage";
36
+ import TrainingPage from "./Components/Page/TrainingPage";
37
+ import UserMyPage from "./Components/Page/UserMyPage";
38
+ import UserList from "./Components/UserList";
39
+ import UserProfile from "./Components/UserProfile";
40
+ import UserEdit from "./Components/Page/UserEdit";
41
+ import SignUp from "./Components/Page/SignUp";
42
+ import SignIn from "./Components/Page/SignIn";
43
+ import SearchResultPage from "./Components/Page/SearchResultPage";
44
+ import Auth from "./Auth";
45
+ import GymsAndMap from "./Components/GymsAndMap";
46
+ import GymRegistraion from "./Components/Component/GymRegistration";
47
+ import Header from "./Components/Header";
48
+ import NotFound from "./Components/Page/NotFound";
49
+
50
+ const Routing = () => {
51
+ const [loggedInStatus, setLoggedInStatus] = useState(false);
52
+ const [loginUser, setLoginUser] = useState("");
53
+ const [isloaded, setIsLoaded] = useState(true);
54
+
55
+ const history = useHistory();
56
+
57
+ const login = () => {
58
+ setLoggedInStatus(true);
59
+ };
60
+
61
+ const logout = () => {
62
+ setLoggedInStatus(false);
63
+ };
64
+
65
+ console.log(loggedInStatus);
66
+
67
+ const checkLoginStatus = () => {
68
+ axios
69
+ .get("http://localhost:3001/login", { withCredentials: true })
70
+ .then((response) => {
71
+ if (response.data.logged_in) {
72
+ setLoginUser(response.data.user);
73
+ setLoggedInStatus(true);
74
+ } else {
75
+ setLoggedInStatus(false);
76
+ // history.push("/signin");
77
+ }
78
+ })
79
+ .catch((error) => {
80
+ console.log("ログインステータスエラー", error);
81
+ });
82
+ setIsLoaded(true);
83
+ };
84
+
85
+ useEffect(() => {
86
+ checkLoginStatus();
87
+ }, []);
88
+
89
+ if (!isloaded) {
90
+ return <div>読み込み中です</div>;
91
+ } else {
92
+ return (
93
+ <div className="App">
94
+ <Router>
95
+ <Header
96
+ loginUser={loginUser}
97
+ logout={logout}
98
+ loggedInStatus={loggedInStatus}
99
+ />
100
+ <Switch>
101
+ <Route
102
+ exact
103
+ path={"/signin"}
104
+ render={(props) => (
105
+ <SignIn
106
+ {...props}
107
+ loggedInStatus={loggedInStatus}
108
+ login={login}
109
+ />
110
+ )}
111
+ />
112
+
113
+ <Auth loggedInStatus={loggedInStatus}>
114
+ <Switch>
115
+ <Route exact path="/" component={TopPage} />
116
+ <Route exact path="/users/:id" component={UserMyPage} />
117
+
118
+ <Route
119
+ exact
120
+ path={"/users/:id/edit"}
121
+ render={(props) => (
122
+ <UserEdit {...props} loginUser={loginUser} />
123
+ )}
124
+ />
125
+ <Route
126
+ exact
127
+ path={"/signup"}
128
+ render={(props) => (
129
+ <SignUp
130
+ {...props}
131
+ loggedInStatus={loggedInStatus}
132
+ login={login}
133
+ />
134
+ )}
135
+ />
136
+
137
+ <Route
138
+ exact
139
+ path={"/users"}
140
+ render={(props) => (
141
+ <UserList {...props} loggedInStatus={loggedInStatus} />
142
+ )}
143
+ />
144
+
145
+ <Route exact path="/gyms" component={GymsAndMap} />
146
+ <Route
147
+ exact
148
+ path="/gyms/registration"
149
+ component={GymRegistraion}
150
+ />
151
+ <Route
152
+ exact
153
+ path="/users/:userId/trainings/:trainingId"
154
+ component={TrainingPage}
155
+ />
156
+
157
+ <Route
158
+ exact
159
+ path="/searchResult"
160
+ component={SearchResultPage}
161
+ />
162
+
163
+ <Route component={NotFound} />
164
+ </Switch>
165
+ </Auth>
166
+ </Switch>
167
+ </Router>
168
+ </div>
169
+ );
170
+ }
171
+ };
172
+
173
+ export default Routing;
174
+
175
+ ```