Added some Router code to handle the routes and started setting up what I hope will be a nice folder structure for this project.

.eslintcache

@@ -0,0 +1 @@
+[{"/home/admin/web/react-inv/src/index.js":"1","/home/admin/web/react-inv/src/App.js":"2","/home/admin/web/react-inv/src/reportWebVitals.js":"3","/home/admin/web/react-inv/src/components/home/home.js":"4","/home/admin/web/react-inv/src/utils/routes.js":"5","/home/admin/web/react-inv/src/components/login/login.js":"6"},{"size":500,"mtime":1608763811190,"results":"7","hashOfConfig":"8"},{"size":1226,"mtime":1610912999530,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":1608763811190,"results":"10","hashOfConfig":"8"},{"size":136,"mtime":1610836145413,"results":"11","hashOfConfig":"8"},{"size":295,"mtime":1610912711190,"results":"12","hashOfConfig":"8"},{"size":168,"mtime":1610912604650,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"1f46w16",{"filePath":"17","messages":"18","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"25","messages":"26","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/home/admin/web/react-inv/src/index.js",[],["27","28"],"/home/admin/web/react-inv/src/App.js",["29"],"/home/admin/web/react-inv/src/reportWebVitals.js",[],"/home/admin/web/react-inv/src/components/home/home.js",[],"/home/admin/web/react-inv/src/utils/routes.js",["30","31"],"/home/admin/web/react-inv/src/components/login/login.js",["32"],{"ruleId":"33","replacedBy":"34"},{"ruleId":"35","replacedBy":"36"},{"ruleId":"37","severity":1,"message":"38","line":9,"column":10,"nodeType":"39","messageId":"40","endLine":9,"endColumn":22},{"ruleId":"37","severity":1,"message":"41","line":1,"column":8,"nodeType":"39","messageId":"40","endLine":1,"endColumn":13},{"ruleId":"42","severity":1,"message":"43","line":5,"column":1,"nodeType":"44","endLine":15,"endColumn":2},{"ruleId":"37","severity":1,"message":"41","line":1,"column":8,"nodeType":"39","messageId":"40","endLine":1,"endColumn":13},"no-native-reassign",["45"],"no-negated-in-lhs",["46"],"no-unused-vars","'DefaultThing' is defined but never used.","Identifier","unusedVar","'react' is defined but never used.","import/no-anonymous-default-export","Assign array to a variable before exporting as module default","ExportDefaultDeclaration","no-global-assign","no-unsafe-negation"]

package.json

@@ -7,8 +7,15 @@
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.6.0",
     "react": "^17.0.1",
+    "react-art": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "4.0.1",
+    "react-native": "^0.63.4",
+    "react-native-sqlite-storage": "^5.0.0",
+    "react-native-web": "^0.14.10",
+    "react-router-dom": "^5.2.0",
+    "react-router-native": "^5.2.0",
+    "react-scripts": "^4.0.1",
+    "typescript": "^4.1.3",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

src/App.js

@@ -1,14 +1,24 @@
+//import { openDatabase } from 'react-native-sqlite-storage';
 import logo from './logo.svg';
 import './App.css';
+//const db = openDatabase("../test.sqlite");
+import {BrowserRouter as Router, Link, Route, Switch } from "react-router-dom";
+import routes from './utils/routes';
 
-function App() {
+
+function DefaultThing(){
   return (
-    <div className="App">
+  <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>
+        <p>
+          <code>
+            SELECT * FROM inv.category;
+          </code>
+        </p>
         <a
           className="App-link"
           href="https://reactjs.org"
@@ -22,4 +32,22 @@ function App() {
   );
 }
 
+function App() {
+  return (
+    <Router>
+      <nav>
+        <div><Link to="/">Home</Link></div>
+        <div><Link to="/login">Login</Link></div>
+      </nav>
+      <Switch>
+        {
+          routes.map((route) => (
+            <Route path={route.path} exact={route.exact} component={route.component}/>
+          )
+        )}
+      </Switch>
+    </Router>
+  );
+}
+
 export default App;

src/components/home/home.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Home() {
+    return (
+        <div>
+            <h1>Home</h1>
+        </div>
+    )
+}

src/components/login/login.js

@@ -0,0 +1,11 @@
+import react from 'react';
+
+import React from 'react'
+
+export default function login() {
+    return (
+        <div>
+              <h1>Login</h1>
+        </div>
+    )
+}

src/containers/Home/Home.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Home() {
+    return (
+        <div>
+            <h1>Home</h1>
+        </div>
+    )
+}

src/containers/Login/Login.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function () {
+    return (
+        <div>
+            <h1>Login</h1>
+        </div>
+    )
+}

src/utils/routes.js

@@ -0,0 +1,15 @@
+import react from 'react';
+import Home from "../components/home/home";
+import Login from '../components/login/login';
+
+export default [
+    {
+        path: "/",
+        exact: true,
+        component: () => <Home />
+    },
+    {
+        path: "/login",
+        component: () => <Login />
+    }
+]