0

EDIT: I've found that this issue is not unique to dynamic routes. Simple routes return 404 when refreshed as well.

In the live version: I can load the home page, search for a certificate, and be taken to the certificate display page properly loaded. If I try to refresh, I get 404.

My routes don't return 404's when running the app locally.

I deployed the app using firebase.

Other similar posts I checked out include this which did not provide a usable answer and this which allowed me to serve my project locally and observe the returned HTTPS codes. The app works as it should when served this way(local) and returns a 304 instead of a 404 on refresh. This had no effect on the version that is deployed. Is this a browser router configuration issue?

App.js

 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {

  return (
    <div>
    <Header/>
      <Routes>
            <Route path="/login" element={<Login/>} />

            <Route path="/search"element={<CertificateSearch/>}/>

            <Route path="/:id" element={<CertificateDisplayPage/>}/>
      </Routes>
      <Footer/>
    </div>
  );
}

export default App;

index.js

import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
codechef
  • 55
  • 1
  • 8
  • 1
    Each ***different*** server/environment hosting/serving the app might have ***different*** requirements/configurations/etc. Check the CRA [deployment](https://create-react-app.dev/docs/deployment/#firebase) docs for Firebase hosting as it may be helpful here. – Drew Reese Dec 21 '22 at 22:19
  • 1
    See also [the section on client-side routing](https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing) further down that same page. – samuei Dec 22 '22 at 14:19
  • I've installed express and setup a simple project that can serve my app locally from express. I'm not sure how to set it up to use express in production. – codechef Dec 22 '22 at 17:42

1 Answers1

0

I found the solution here

I got it to work by adding

    "rewrites": [ {
"source": "**",
"destination": "/index.html"
}],

to my firebase.json file

codechef
  • 55
  • 1
  • 8