Skip to content

Commit 597a0ea

Browse files
rjwatsrjwats
authored
Upgrade react router (#267)
Upgrade react router to ^6.0.2
1 parent 5336ffd commit 597a0ea

23 files changed

+346
-494
lines changed

‎interface/package-lock.json‎

Lines changed: 13 additions & 98 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎interface/package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "interface2",
33
"version": "0.1.0",
44
"private": true,
5-
"proxy": "http://192.168.0.77",
5+
"proxy": "http://192.168.0.23",
66
"dependencies": {
77
"@emotion/react": "^11.5.0",
88
"@emotion/styled": "^11.3.0",
@@ -12,7 +12,6 @@
1212
"@types/node": "^12.20.36",
1313
"@types/react": "^17.0.34",
1414
"@types/react-dom": "^17.0.11",
15-
"@types/react-router-dom": "^5.3.2",
1615
"async-validator": "^4.0.7",
1716
"axios": "^0.24.0",
1817
"compression-webpack-plugin": "^6.1.1",
@@ -25,7 +24,7 @@
2524
"react-app-rewired": "^2.1.8",
2625
"react-dom": "^17.0.2",
2726
"react-dropzone": "^11.4.2",
28-
"react-router-dom": "^5.3.0",
27+
"react-router-dom": "^6.0.2",
2928
"react-scripts": "4.0.3",
3029
"sockette": "^2.0.6",
3130
"typescript": "^4.5.2"

‎interface/src/AppRouting.tsx‎

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { FC, useContext, useEffect } from 'react';
2-
import { Route, useLocation } from 'react-router-dom';
3-
import { Switch, Redirect } from 'react-router';
2+
import { Navigate, Routes, Route, useLocation } from 'react-router-dom';
43
import { useSnackbar, VariantType } from 'notistack';
54

65
import { Authentication, AuthenticationContext } from './contexts/authentication';
76
import { FeaturesContext } from './contexts/features';
8-
import { AuthenticatedRoute, UnauthenticatedRoute } from './components';
7+
import { RequireAuthenticated, RequireUnauthenticated } from './components';
98

109
import SignIn from './SignIn';
1110
import AuthenticatedRouting from './AuthenticatedRouting';
@@ -22,29 +21,48 @@ const SecurityRedirect: FC<SecurityRedirectProps> = ({ message, variant }) => {
2221
authenticationContext.signOut(false);
2322
enqueueSnackbar(message, { variant });
2423
}, [message, variant, authenticationContext, enqueueSnackbar]);
25-
return (<Redirect to="/" />);
24+
return (<Navigate to="/" />);
25+
};
26+
27+
export const RemoveTrailingSlashes = () => {
28+
const location = useLocation();
29+
return location.pathname.match('/.*/$') && (
30+
<Navigate
31+
to={{
32+
pathname: location.pathname.replace(/\/+$/, ""),
33+
search: location.search
34+
}}
35+
/>
36+
);
2637
};
2738

2839
const AppRouting: FC = () => {
29-
const { pathname } = useLocation();
3040
const { features } = useContext(FeaturesContext);
3141

3242
return (
3343
<Authentication>
34-
<Switch>
35-
<Redirect from="/:url*(/+)" to={pathname.slice(0, -1)} />
36-
<Route exact path="/unauthorized">
37-
<SecurityRedirect message="Please log in to continue" />
38-
</Route>
39-
{features.security && (
40-
<UnauthenticatedRoute exact path="/" >
41-
<SignIn />
42-
</UnauthenticatedRoute>
43-
)}
44-
<AuthenticatedRoute path="/" >
45-
<AuthenticatedRouting />
46-
</AuthenticatedRoute>
47-
</Switch>
44+
<RemoveTrailingSlashes />
45+
<Routes>
46+
<Route path="/unauthorized" element={<SecurityRedirect message="Please log in to continue" />} />
47+
{features.security &&
48+
<Route
49+
path="/"
50+
element={
51+
52+
<RequireUnauthenticated>
53+
<SignIn />
54+
</RequireUnauthenticated>
55+
}
56+
/>}
57+
<Route
58+
path="/*"
59+
element={
60+
<RequireAuthenticated>
61+
<AuthenticatedRouting />
62+
</RequireAuthenticated>
63+
}
64+
/>
65+
</Routes>
4866
</Authentication>
4967
);
5068
};

‎interface/src/AuthenticatedRouting.tsx‎

Lines changed: 25 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,34 @@
11
import { FC, useCallback, useContext, useEffect } from 'react';
2-
import { Redirect, Switch } from 'react-router';
3-
import { Route, useHistory, useLocation } from 'react-router-dom';
2+
import { Navigate, Routes, Route, useNavigate, useLocation } from 'react-router-dom';
43
import { AxiosError } from 'axios';
54

5+
import { FeaturesContext } from './contexts/features';
66
import * as AuthenticationApi from './api/authentication';
77
import { PROJECT_PATH } from './api/env';
88
import { AXIOS } from './api/endpoints';
9-
import { AdminRoute, Layout } from './components';
10-
import { FeaturesContext } from './contexts/features';
9+
import { Layout, RequireAdmin } from './components';
1110

1211
import ProjectRouting from './project/ProjectRouting';
12+
1313
import WiFiConnection from './framework/wifi/WiFiConnection';
1414
import AccessPoint from './framework/ap/AccessPoint';
1515
import NetworkTime from './framework/ntp/NetworkTime';
1616
import Mqtt from './framework/mqtt/Mqtt';
17-
import Security from './framework/security/Security';
1817
import System from './framework/system/System';
18+
import Security from './framework/security/Security';
1919

2020
const AuthenticatedRouting: FC = () => {
21-
2221
const { features } = useContext(FeaturesContext);
2322
const location = useLocation();
24-
const history = useHistory();
23+
const navigate = useNavigate();
2524

2625
const handleApiResponseError = useCallback((error: AxiosError) => {
2726
if (error.response && error.response.status === 401) {
2827
AuthenticationApi.storeLoginRedirect(location);
29-
history.push("/unauthorized");
28+
navigate("/unauthorized");
3029
}
3130
return Promise.reject(error);
32-
}, [location, history]);
31+
}, [location, navigate]);
3332

3433
useEffect(() => {
3534
const axiosHandlerId = AXIOS.interceptors.response.use((response) => response, handleApiResponseError);
@@ -38,38 +37,31 @@ const AuthenticatedRouting: FC = () => {
3837

3938
return (
4039
<Layout>
41-
<Switch>
40+
<Routes>
4241
{features.project && (
43-
<Route path={`/${PROJECT_PATH}`}>
44-
<ProjectRouting />
45-
</Route>
42+
<Route path={`/${PROJECT_PATH}/*`} element={<ProjectRouting />} />
4643
)}
47-
<Route path="/wifi">
48-
<WiFiConnection />
49-
</Route>
50-
<Route path="/ap">
51-
<AccessPoint />
52-
</Route>
44+
<Route path="/wifi/*" element={<WiFiConnection />} />
45+
<Route path="/ap/*" element={<AccessPoint />} />
5346
{features.ntp && (
54-
<Route path="/ntp">
55-
<NetworkTime />
56-
</Route>
47+
<Route path="/ntp/*" element={<NetworkTime />} />
5748
)}
5849
{features.mqtt && (
59-
<Route path="/mqtt">
60-
<Mqtt />
61-
</Route>
50+
<Route path="/mqtt/*" element={<Mqtt />} />
6251
)}
6352
{features.security && (
64-
<AdminRoute path="/security">
65-
<Security />
66-
</AdminRoute>
53+
<Route
54+
path="/security/*"
55+
element={
56+
<RequireAdmin>
57+
<Security />
58+
</RequireAdmin>
59+
}
60+
/>
6761
)}
68-
<Route path="/system">
69-
<System />
70-
</Route>
71-
<Redirect to={AuthenticationApi.getDefaultRoute(features)} />
72-
</Switch>
62+
<Route path="/system/*" element={<System />} />
63+
<Route path="/*" element={<Navigate to={AuthenticationApi.getDefaultRoute(features)} />} />
64+
</Routes>
7365
</Layout>
7466
);
7567
};

0 commit comments

Comments
 (0)