added React router, renamed approutes, fixed package-lock errors

package.json

@@ -11,6 +11,7 @@
     "@types/openlayers": "^4.6.17",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
+    "@types/react-router-dom": "^5.1.7",
     "chokidar": "^3.5.1",
     "dotenv": "^8.2.0",
     "google-spreadsheet": "^3.1.15",
@@ -20,6 +21,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-mapbox-gl": "^5.1.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
     "typescript": "^4.2.3"
   },

src/App.tsx

@@ -1,13 +1,9 @@
 import React from 'react'
-import MapContainer from './components/MapContainer/MapContainer'
+import { Route } from 'react-router-dom'
+import Main from './components/main'
 
-const App: React.FC = () => {
-  return (
-    <div className="App">
-      <h1 style={{ textAlign: 'center' }}> (test OL) Orca Map</h1>
-      <MapContainer />
-    </div>
-  )
+const Approutes: React.FC = () => {
+  return <Route path="/" component={Main} />
 }
 
-export default App
+export default Approutes

src/components/header.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Header: React.FC = () => {
+  return <h1 style={{ textAlign: 'center' }}> (test OL) Orca Map</h1>
+}
+
+export default Header

src/components/main.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Route, Switch } from 'react-router-dom'
+import Header from './header'
+import MapContainer from './MapContainer/MapContainer'
+
+const Main: React.FC = () => {
+  return (
+    <React.Fragment>
+      <Header />
+      <Switch>
+        <Route path="/" exact component={MapContainer} />
+      </Switch>
+    </React.Fragment>
+  )
+}
+export default Main

src/index.tsx

@@ -1,12 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
-import App from './App'
+import Approutes from './App'
+import { BrowserRouter } from 'react-router-dom'
 import * as serviceWorker from './serviceWorker'
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <Approutes />
+    </BrowserRouter>
   </React.StrictMode>,
 
   document.getElementById('root'),