diff options
Diffstat (limited to 'src/App.tsx')
-rw-r--r-- | src/App.tsx | 76 |
1 files changed, 38 insertions, 38 deletions
diff --git a/src/App.tsx b/src/App.tsx index b1b2184..523e583 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,9 +4,9 @@ import React, { Suspense } from "react"; import { jsx, css, Global } from "@emotion/react"; import { - BrowserRouter as Router, - Route, - Switch + BrowserRouter as Router, + Route, + Switch } from "react-router-dom"; import { PropagateLoader } from "react-spinners"; @@ -20,48 +20,48 @@ const FormPage = React.lazy(() => import("./pages/FormPage")); const CallbackPage = React.lazy(() => import("./pages/CallbackPage")); const routes = [ - { path: "/", Component: LandingPage }, - { path: "/form/:id", Component: FormPage}, - { path: "/callback", Component: CallbackPage } -] + { path: "/", Component: LandingPage }, + { path: "/form/:id", Component: FormPage}, + { path: "/callback", Component: CallbackPage } +]; function PageLoading() { - return <div css={css` + return <div css={css` display: flex; justify-content: center; margin-top: 50px; `}> - <PropagateLoader color="white" size={100}/> - </div> + <PropagateLoader color="white" size={100}/> + </div>; } -function App() { - 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> - </div> - ); -}; +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> + </div> + ); +} export default App; |