Skip to content

Commit d5d0243

Browse files
author
Brendan Mulholland
authored
chore(routing): Switch to new react-router syntax (#638)
This is step #2 of upgrading to React Router v6. https://reactrouter.com/en/main/upgrading/v5#upgrade-to-react-router-v51 As reference, I looked at https://reacttraining.com/blog/react-router-v5-1 and https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f
1 parent 81517f2 commit d5d0243

File tree

1 file changed

+30
-20
lines changed

1 file changed

+30
-20
lines changed

src/app.tsx

+30-20
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
HashRouter as Router,
55
Route,
66
Switch,
7+
useLocation,
78
} from 'react-router-dom';
89

910
import { AppContext, AppProvider } from './context/App';
@@ -15,24 +16,16 @@ import { NotificationsRoute } from './routes/Notifications';
1516
import { SettingsRoute } from './routes/Settings';
1617
import { Sidebar } from './components/Sidebar';
1718

18-
export const PrivateRoute = ({ component: Component, ...rest }) => {
19+
function RequireAuth({ children }) {
1920
const { isLoggedIn } = useContext(AppContext);
21+
const location = useLocation();
2022

21-
return (
22-
<Route
23-
{...rest}
24-
render={(props) =>
25-
isLoggedIn ? (
26-
<Component {...props} />
27-
) : (
28-
<Redirect
29-
to={{ pathname: '/login', state: { from: props.location } }}
30-
/>
31-
)
32-
}
33-
/>
23+
return isLoggedIn ? (
24+
children
25+
) : (
26+
<Redirect to={{ pathname: '/login', state: { from: location } }} />
3427
);
35-
};
28+
}
3629

3730
export const App = () => {
3831
return (
@@ -43,11 +36,28 @@ export const App = () => {
4336
<Sidebar />
4437

4538
<Switch>
46-
<PrivateRoute path="/" exact component={NotificationsRoute} />
47-
<PrivateRoute path="/settings" exact component={SettingsRoute} />
48-
<Route path="/login" component={LoginRoute} />
49-
<Route path="/login-enterprise" component={LoginEnterpriseRoute} />
50-
<Route path="/login-token" component={LoginWithToken} />
39+
<Route path="/" exact>
40+
<RequireAuth>
41+
<NotificationsRoute />
42+
</RequireAuth>
43+
</Route>
44+
<Route path="/settings" exact>
45+
<RequireAuth>
46+
<SettingsRoute />
47+
</RequireAuth>
48+
</Route>
49+
<Route path="/login">
50+
<LoginRoute />
51+
</Route>
52+
<Route path="/login">
53+
<LoginRoute />
54+
</Route>
55+
<Route path="/login-enterprise">
56+
<LoginEnterpriseRoute />
57+
</Route>
58+
<Route path="/login-token">
59+
<LoginWithToken />
60+
</Route>
5161
</Switch>
5262
</div>
5363
</Router>

0 commit comments

Comments
 (0)