Remove react-router-dom

Doesn't work so hot with gh-pages
usds · Mar 5, 2024 · 4127faa · 4127faa
1 parent 41ad43c
commit 4127faa
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "license": "MIT",
   "version": "0.0.1",
   "type": "module",
-  "homepage": "usds.github.io/website-content-editor",
+  "homepage": "https://usds.github.io/website-content-editor",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

diff --git a/src/App.tsx b/src/App.tsx
@@ -6,57 +6,45 @@ import "react-toastify/dist/ReactToastify.css";
 import "./App.css";
 import {Fragment} from "react";
 import {BlogEditorPage} from "./pages/BlogEditorPage.tsx";
-import {BrowserRouter, Routes, Route, NavLink, Outlet} from "react-router-dom";
-import {HomePage} from "./pages/HomePage.tsx";
-import {ErrorElement} from "./components/ErrorElement.tsx";
 import {NavList, Header, Title,} from "@trussworks/react-uswds";
-import {AboutPage} from "./pages/AboutPage.tsx";
 
 // we use the uswds styles from usds.github.io/website-staging
 // import '@uswds/uswds/css/uswds.css';
 
 
-const Layout = () => {
-  return (
-    <Fragment>
-      <Header basic>
-        <div className="usa-nav-container">
-          <div className="usa-navbar">
-            <Title>Website Content Editor</Title>
-            {/* A "layout route" is a good place to put markup you want to
-          share across all the pages on your site, like navigation. */}
-            <NavList items={
-              [<NavLink key={"homenavlink"} to="/">Home</NavLink>,
-                <NavLink key={"aboutlink"} to="/about">About</NavLink>,
-                <NavLink key={"blogedit"} to="/blogedit">News-and-blog editor</NavLink>]
-            } type="primary"/>
-          </div>
-        </div>
-      </Header>
-
-
-      {/* An <Outlet> renders whatever child route is currently active,
-          so you can think about this <Outlet> as a placeholder for
-          the child routes we defined above. */}
-      <section className="usa-section">
-        <Outlet/>
-      </section>
-    </Fragment>
-);
-}
+// const Layout = () => {
+//   return (
+//     <Fragment>
+//       <Header basic>
+//         <div className="usa-nav-container">
+//           <div className="usa-navbar">
+//             <Title>Website Content Editor</Title>
+//             {/* A "layout route" is a good place to put markup you want to
+//           share across all the pages on your site, like navigation. */}
+//             <NavList items={
+//               [<NavLink key={"homenavlink"} to="/">Home</NavLink>,
+//                 <NavLink key={"aboutlink"} to="/about">About</NavLink>,
+//                 <NavLink key={"blogedit"} to="/blogedit">News-and-blog editor</NavLink>]
+//             } type="primary"/>
+//           </div>
+//         </div>
+//       </Header>
+//
+//
+//       {/* An <Outlet> renders whatever child route is currently active,
+//           so you can think about this <Outlet> as a placeholder for
+//           the child routes we defined above. */}
+//       <section className="usa-section">
+//         <Outlet/>
+//       </section>
+//     </Fragment>
+// );
+// }
 
 function App() {
   return (
     <Fragment>
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Layout/>}>
-            <Route path="/" element={<HomePage/>}/>
-            <Route path="/about" element={<AboutPage/>}/>
-            <Route path="/blogedit" element={<BlogEditorPage/>}/>
-          </Route>
-        </Routes>
-      </BrowserRouter>
+      <BlogEditorPage/>
       <ToastContainer limit={4}/>
     </Fragment>
   );