aboutsummaryrefslogtreecommitdiffstats
path: root/src/App.tsx
diff options
context:
space:
mode:
authorGravatar Hassan Abouelela <[email protected]>2022-06-18 23:59:14 +0400
committerGravatar Hassan Abouelela <[email protected]>2022-06-18 23:59:14 +0400
commit5f4ddc8fd7d84500457bb08b0981a84a2d1594b1 (patch)
treedd6d0323f69451de19a2e500fdd8814b473d0669 /src/App.tsx
parentBump CodeMirror to 6.0.0 (diff)
Bump React To 18.2.0
Bump react to v18, and handle all the breaking changes. This includes bumping a lot of other dependencies to versions which support react 18, and handling the breaking changes for those. Refer to the following documents for migration guides: React: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html Router: https://reactrouter.com/docs/en/v6/upgrading/v5 Signed-off-by: Hassan Abouelela <[email protected]>
Diffstat (limited to 'src/App.tsx')
-rw-r--r--src/App.tsx50
1 files changed, 24 insertions, 26 deletions
diff --git a/src/App.tsx b/src/App.tsx
index 523e583..752a6c6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,11 +3,7 @@
import React, { Suspense } from "react";
import { jsx, css, Global } from "@emotion/react";
-import {
- BrowserRouter as Router,
- Route,
- Switch
-} from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
import { PropagateLoader } from "react-spinners";
@@ -35,31 +31,33 @@ function PageLoading() {
</div>;
}
+function Routing(): JSX.Element {
+ const renderedRoutes = routes.map(({path, Component}) => (
+ <Route key={path} path={path} element={
+ <Suspense fallback={<PageLoading/>}><Component/></Suspense>
+ }/>
+ ));
+
+ return (
+ <Routes location={location}>
+ {renderedRoutes}
+ </Routes>
+ );
+}
+
function App(): JSX.Element {
return (
<div>
<Global styles={globalStyles}/>
- <Router>
- <Route render={({ location }) => (
- <TransitionGroup>
- <CSSTransition
- key={location.pathname}
- classNames="fade"
- timeout={300}
- >
- <Switch location={location}>
- {routes.map(({path, Component}) => (
- <Route exact key={path} path={path}>
- <Suspense fallback={<PageLoading/>}>
- <Component/>
- </Suspense>
- </Route>
- ))}
- </Switch>
- </CSSTransition>
- </TransitionGroup>
- )}/>
- </Router>
+ <TransitionGroup>
+ <CSSTransition key={location.pathname} classNames="fade" timeout={300}>
+ <BrowserRouter>
+ <Routes>
+ <Route path="*" element={<Routing/>}/>
+ </Routes>
+ </BrowserRouter>
+ </CSSTransition>
+ </TransitionGroup>
</div>
);
}