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 b5d0bcf

Browse files
committed
update project for new react and react-router-dom
1 parent 42afb86 commit b5d0bcf

File tree

9 files changed

+6380
-21110
lines changed

9 files changed

+6380
-21110
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 13916 deletions
This file was deleted.

‎package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@
66
"@testing-library/jest-dom": "^4.2.4",
77
"@testing-library/react": "^9.3.2",
88
"@testing-library/user-event": "^7.1.2",
9-
"axios": "^0.20.0",
10-
"bootstrap": "^4.5.2",
11-
"react": "^16.13.1",
12-
"react-dom": "^16.13.1",
13-
"react-redux": "^7.2.1",
14-
"react-router-dom": "^5.2.0",
15-
"react-scripts": "3.4.3",
9+
"axios": "^0.27.2",
10+
"bootstrap": "^4.6.1",
11+
"react": "^18.2.0",
12+
"react-dom": "^18.2.0",
13+
"react-redux": "^8.0.1",
14+
"react-router-dom": "^6.4.0",
15+
"react-scripts": "5.0.1",
1616
"react-validation": "^3.0.7",
17-
"redux": "^4.0.5",
18-
"redux-thunk": "^2.3.0",
19-
"validator": "^13.1.1"
17+
"redux": "^4.2.0",
18+
"redux-thunk": "^2.4.1",
19+
"validator": "^13.7.0"
2020
},
2121
"scripts": {
2222
"start": "react-scripts start",

‎src/App.js‎

Lines changed: 79 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect, useCallback } from "react";
22
import { useDispatch, useSelector } from "react-redux";
3-
import { Router,Switch,Route, Link } from "react-router-dom";
3+
import { Routes,Route, Link,useLocation } from "react-router-dom";
44

55
import "bootstrap/dist/css/bootstrap.min.css";
66
import "./App.css";
@@ -16,8 +16,6 @@ import BoardAdmin from "./components/BoardAdmin";
1616
import { logout } from "./actions/auth";
1717
import { clearMessage } from "./actions/message";
1818

19-
import { history } from "./helpers/history";
20-
2119
// import AuthVerify from "./common/AuthVerify";
2220
import EventBus from "./common/EventBus";
2321

@@ -28,11 +26,13 @@ const App = () => {
2826
const { user: currentUser } = useSelector((state) => state.auth);
2927
const dispatch = useDispatch();
3028

29+
let location = useLocation();
30+
3131
useEffect(() => {
32-
history.listen((location)=> {
32+
if(["/login","/register"].includes(location.pathname)) {
3333
dispatch(clearMessage()); // clear message when changing location
34-
});
35-
}, [dispatch]);
34+
}
35+
}, [dispatch,location]);
3636

3737
const logOut = useCallback(() => {
3838
dispatch(logout());
@@ -57,89 +57,88 @@ const App = () => {
5757
}, [currentUser, logOut]);
5858

5959
return (
60-
<Router history={history}>
61-
<div>
62-
<nav className="navbar navbar-expand navbar-dark bg-dark">
63-
<Link to={"/"} className="navbar-brand">
64-
bezKoder
65-
</Link>
66-
<div className="navbar-nav mr-auto">
60+
<div>
61+
<nav className="navbar navbar-expand navbar-dark bg-dark">
62+
<Link to={"/"} className="navbar-brand">
63+
bezKoder
64+
</Link>
65+
<div className="navbar-nav mr-auto">
66+
<li className="nav-item">
67+
<Link to={"/home"} className="nav-link">
68+
Home
69+
</Link>
70+
</li>
71+
72+
{showModeratorBoard && (
6773
<li className="nav-item">
68-
<Link to={"/home"} className="nav-link">
69-
Home
74+
<Link to={"/mod"} className="nav-link">
75+
Moderator Board
7076
</Link>
7177
</li>
78+
)}
7279

73-
{showModeratorBoard && (
74-
<li className="nav-item">
75-
<Link to={"/mod"} className="nav-link">
76-
Moderator Board
77-
</Link>
78-
</li>
79-
)}
80-
81-
{showAdminBoard && (
82-
<li className="nav-item">
83-
<Link to={"/admin"} className="nav-link">
84-
Admin Board
85-
</Link>
86-
</li>
87-
)}
88-
89-
{currentUser && (
90-
<li className="nav-item">
91-
<Link to={"/user"} className="nav-link">
92-
User
93-
</Link>
94-
</li>
95-
)}
96-
</div>
80+
{showAdminBoard && (
81+
<li className="nav-item">
82+
<Link to={"/admin"} className="nav-link">
83+
Admin Board
84+
</Link>
85+
</li>
86+
)}
9787

98-
{currentUser ? (
99-
<div className="navbar-nav ml-auto">
100-
<li className="nav-item">
101-
<Link to={"/profile"} className="nav-link">
102-
{currentUser.username}
103-
</Link>
104-
</li>
105-
<li className="nav-item">
106-
<a href="/login" className="nav-link" onClick={logOut}>
107-
LogOut
108-
</a>
109-
</li>
110-
</div>
111-
) : (
112-
<div className="navbar-nav ml-auto">
113-
<li className="nav-item">
114-
<Link to={"/login"} className="nav-link">
115-
Login
116-
</Link>
117-
</li>
118-
119-
<li className="nav-item">
120-
<Link to={"/register"} className="nav-link">
121-
Sign Up
122-
</Link>
123-
</li>
124-
</div>
88+
{currentUser && (
89+
<li className="nav-item">
90+
<Link to={"/user"} className="nav-link">
91+
User
92+
</Link>
93+
</li>
12594
)}
126-
</nav>
127-
128-
<div className="container mt-3">
129-
<Switch>
130-
<Route exact path={["/", "/home"]} component={Home} />
131-
<Route exact path="/login" component={Login} />
132-
<Route exact path="/register" component={Register} />
133-
<Route exact path="/profile" component={Profile} />
134-
<Route path="/user" component={BoardUser} />
135-
<Route path="/mod" component={BoardModerator} />
136-
<Route path="/admin" component={BoardAdmin} />
137-
</Switch>
13895
</div>
13996

140-
{/* <AuthVerify logOut={logOut}/> */}
97+
{currentUser ? (
98+
<div className="navbar-nav ml-auto">
99+
<li className="nav-item">
100+
<Link to={"/profile"} className="nav-link">
101+
{currentUser.username}
102+
</Link>
103+
</li>
104+
<li className="nav-item">
105+
<a href="/login" className="nav-link" onClick={logOut}>
106+
LogOut
107+
</a>
108+
</li>
109+
</div>
110+
) : (
111+
<div className="navbar-nav ml-auto">
112+
<li className="nav-item">
113+
<Link to={"/login"} className="nav-link">
114+
Login
115+
</Link>
116+
</li>
117+
118+
<li className="nav-item">
119+
<Link to={"/register"} className="nav-link">
120+
Sign Up
121+
</Link>
122+
</li>
123+
</div>
124+
)}
125+
</nav>
126+
127+
<div className="container mt-3">
128+
<Routes>
129+
<Route path="/" element={<Home />} />
130+
<Route path="/home" element={<Home />} />
131+
<Route path="/login" element={<Login />} />
132+
<Route path="/register" element={<Register />} />
133+
<Route path="/profile" element={<Profile />} />
134+
<Route path="/user" element={<BoardUser />} />
135+
<Route path="/mod" element={<BoardModerator />} />
136+
<Route path="/admin" element={<BoardAdmin />} />
137+
</Routes>
141138
</div>
142-
</Router>
139+
140+
{/* <AuthVerify logOut={logOut}/> */}
141+
</div>
143142
);
144143
};
145144

‎src/common/AuthVerify.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from "react";
2-
import { history } from '../helpers/history';
1+
import React,{useEffect} from "react";
2+
import { useLocation } from "react-router-dom";
33

44
const parseJwt = (token) => {
55
try {
@@ -10,7 +10,9 @@ const parseJwt = (token) => {
1010
};
1111

1212
const AuthVerify = (props) => {
13-
history.listen(() => {
13+
let location = useLocation();
14+
15+
useEffect(() => {
1416
const user = JSON.parse(localStorage.getItem("user"));
1517

1618
if (user) {
@@ -20,7 +22,7 @@ const AuthVerify = (props) => {
2022
props.logOut();
2123
}
2224
}
23-
});
25+
},[location,props]);
2426

2527
return <div></div>;
2628
};

‎src/components/Login.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useRef } from "react";
22
import { useDispatch, useSelector } from "react-redux";
3-
import { Redirect } from 'react-router-dom';
3+
import { Navigate,useNavigate } from 'react-router-dom';
44

55
import Form from "react-validation/build/form";
66
import Input from "react-validation/build/input";
@@ -19,6 +19,8 @@ const required = (value) => {
1919
};
2020

2121
const Login = (props) => {
22+
let navigate = useNavigate();
23+
2224
const form = useRef();
2325
const checkBtn = useRef();
2426

@@ -51,7 +53,7 @@ const Login = (props) => {
5153
if (checkBtn.current.context._errors.length === 0) {
5254
dispatch(login(username, password))
5355
.then(() => {
54-
props.history.push("/profile");
56+
navigate("/profile");
5557
window.location.reload();
5658
})
5759
.catch(() => {
@@ -63,7 +65,7 @@ const Login = (props) => {
6365
};
6466

6567
if (isLoggedIn) {
66-
return <Redirect to="/profile" />;
68+
return <Navigate to="/profile" />;
6769
}
6870

6971
return (

‎src/components/Profile.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from "react";
2-
import { Redirect } from 'react-router-dom';
2+
import { Navigate } from 'react-router-dom';
33
import { useSelector } from "react-redux";
44

55
const Profile = () => {
66
const { user: currentUser } = useSelector((state) => state.auth);
77

88
if (!currentUser) {
9-
return <Redirect to="/login" />;
9+
return <Navigate to="/login" />;
1010
}
1111

1212
return (

‎src/helpers/history.js‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/index.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
import React from "react";
2-
import ReactDOMfrom "react-dom";
2+
import {createRoot}from "react-dom/client";
33
import { Provider } from "react-redux";
44
import store from "./store";
55
import "./index.css";
66
import App from "./App";
77
import * as serviceWorker from "./serviceWorker";
88

9-
ReactDOM.render(
9+
import { BrowserRouter } from "react-router-dom";
10+
11+
const container = document.getElementById("root");
12+
const root = createRoot(container);
13+
14+
root.render(
1015
<Provider store={store}>
11-
<App />
12-
</Provider>,
13-
document.getElementById("root")
16+
<BrowserRouter>
17+
<App />
18+
</BrowserRouter>
19+
</Provider>
1420
);
1521

1622
// If you want your app to work offline and load faster, you can chađinge

0 commit comments

Comments
(0)

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