| 1 | import React from 'react'; |
| 2 | import {useState, Suspense} from 'react'; |
| 3 | import {BrowserRouter, Switch, Route} from 'react-router-dom'; |
| 4 | |
| 5 | import HomePage from './HomePage'; |
| 6 | import AboutPage from './AboutPage'; |
| 7 | import ThemeContext from './shared/ThemeContext'; |
| 8 | |
| 9 | export default function App() { |
| 10 | const [theme, setTheme] = useState('slategrey'); |
| 11 | |
| 12 | function handleToggleClick() { |
| 13 | if (theme === 'slategrey') { |
| 14 | setTheme('hotpink'); |
| 15 | } else { |
| 16 | setTheme('slategrey'); |
| 17 | } |
| 18 | } |
| 19 | |
| 20 | return ( |
| 21 | <BrowserRouter> |
| 22 | <ThemeContext.Provider value={theme}> |
| 23 | <div style={{fontFamily: 'sans-serif'}}> |
| 24 | <div |
| 25 | style={{ |
| 26 | margin: 20, |
| 27 | padding: 20, |
| 28 | border: '1px solid black', |
| 29 | minHeight: 300, |
| 30 | }}> |
| 31 | <button onClick={handleToggleClick}>Toggle Theme Context</button> |
| 32 | <br /> |
| 33 | <Suspense fallback={<Spinner />}> |
| 34 | <Switch> |
| 35 | <Route path="/about"> |
| 36 | <AboutPage /> |
| 37 | </Route> |
| 38 | <Route path="/"> |
| 39 | <HomePage /> |
| 40 | </Route> |
| 41 | </Switch> |
| 42 | </Suspense> |
| 43 | </div> |
| 44 | </div> |
| 45 | </ThemeContext.Provider> |
| 46 | </BrowserRouter> |
| 47 | ); |
| 48 | } |
| 49 | |
| 50 | function Spinner() { |
| 51 | return null; |
| 52 | } |