Issues deploying a routed React App to Github Pages

Question

Like many others, I'm getting stuck on deploying a routed react app to gh pages. The page is just blank - no 404 errors or anything. In the console, I do get some errors like this:

Error react-dom.production.min.js:189

at U (router.ts:5:20)
at ee (hooks.tsx:32:3)
at index.tsx:267:16
at Ei (react-dom.production.min.js:167:137)
at kl (react-dom.production.min.js:193:57)
at xu (react-dom.production.min.js:294:275)
at bc (react-dom.production.min.js:280:389)
at yc (react-dom.production.min.js:280:320)
at vc (react-dom.production.min.js:280:180)
at oc (react-dom.production.min.js:271:88)

I have looked over several articles and stack overflow threads on deploying routed apps. I have changed the homepage value to a slightly different order, and I've doublechecked the spelling of the repo. I run npm run deploy, it makes the build folder, gives me a deployment on ghpages, then just a blank screen.

I have put in HashRouter instead of BrowserRouter, I've added a "basename = '/'" to the HashRouter...I have tried putting the title of the homepage (minireddit) in front of all of my route paths in App.js.

I'm hoping some fresh eyes on this will help - I'm sure it's just some silly mistake I'm making, so any help would be appreciated. Thanks!

App.js:

import { HashRouter, BrowserRouter, Route, Routes } from 'react-router-dom'

(imports for pages/components/styles)

function App() {

  return (
    <div className="App">

      <NavBar />
      <div className="reddit-container">
        <BrowserRouter>
          <HashRouter basename = "/">
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/subreddit/:name" element={<SubReddit />} />
              <Route path="/search" element={<Search />} />
            </Routes>
          </HashRouter>
        </BrowserRouter>
        <SideBar />
      </div>

    </div>
  );
}

export default App;

package.json

{
  "name": "minireddit",
  "homepage": "https://myusername.github.io/minireddit/",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "date-fns": "^2.28.0",
    "icons": "^1.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build",
   "deploy": "gh-pages -d build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^4.0.0"
  }
}

Answer 1

So, I got it to work by doing two things (I probably only needed one, but at that point I didn't care why it worked, so long as it finally worked).

1. I changed the BR to HashRouter, and moved it so that it enclosed everything in "container"

2. In index.js, I had deleted <React.StrictMode>. I put that back in.

These two changes worked, though I should go back and see if I can isolate if only one of these was the solution.