React BrowserRouter not working after build

Question

I have a static html website, and I want to embed a small React app inside a div on one of its pages (portfolio.html). My approach was to use create-react-app to create the widget, npm run build, and dump the build folder into my websites /static folder.

portfolio.html has a div with the id "portfolio-container". So I link the built and minified .js folder in a script tag on this page. I've tested it and it works when I render out some random jsx, but my problem is that it won't render out any of my routes.

Here is the top level component that is rendered into the root (#portfolio-container):

import '../portfolio.css'
import Project from './Project'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import ProjectGrid from './ProjectGrid'

function App() {
  return (
    <Router basename={process.env.PUBLIC_URL}>
      <Routes>
        <Route path="/" element={<ProjectGrid />} />
        <Route path="/project/:id" element={<Project />} />
      </Routes>
    </Router>
  )
}

export default App

It works on my local host, but after building and using in my website, it won't render anything inside (Like I say, it did work without the router, so I know my problem is not how I'm embedding the React app, but how I'm configuring the router).

I've done some research and I've messed with things like public url, basename, package.json homepage etc, but I can't find anything that's worked so far. It might be how I'm implementing these potential solutions, I don't know.

So to summarize, my App works perfectly on localhost, but it needs to also work after being built and used within my static html website while viewing with vs code live server, AND after being deployed online to the domain name.

Any help much appreciated.

Answer 1

I had the same problem on the Apache HTTP Server and I solved it by introducing the .htaccess file as specified by this documentation. I don't know what server you want to publish your site on, so I suggest you look at the documentation I linked to and find the solution that's right for you!