import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import { BrowserRouter , Route , Routes , Link } from 'react-router-dom' ; import { Stack } from '@twilio-paste/core/stack' ; import App from './App' ; import reportWebVitals from './reportWebVitals' ; import { IndexPage } from './pages/IndexPage' ; import { Loading } from './components/Loading' ; const Page1 = React . lazy ( async ( ) => import ( './pages/Page1' ) ) ; const Page2 = React . lazy ( async ( ) => import ( './pages/Page2' ) ) ; export const Index = ( ) => { return ( < App > < React . Suspense fallback = { < Loading / > } > < BrowserRouter > < Stack orientation = "horizontal" spacing = "space20" > < Link to = "/" > Home < /Link> < Link to = "/page1" > page 1 < /Link> < Link to = "/page2" > page 2 < /Link> < /Stack> < Routes > < Route path = "" > < IndexPage /> < /Route> < Route path = "page1" > < Page1 /> < /Route> < Route path = "/page2" > < Page2 /> < /Route> < /Routes> < /BrowserRouter> < /React.Suspense> < /App>); } ; ReactDOM . render ( < React . StrictMode > < Index /> < /React.StrictMode>, document.querySelector('#root')); reportWebVitals ( console . log ) ;