React Routing only works on local machine. On Heroku only root page works

Question

My React app works great on local machine but when brought to Heroku, it only renders the root page. Any other page I get a 404 error.

This is my App.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Home from './pages/Home'
import Blog from './pages/Blog'
import Contact from './pages/Contact'
import About from './pages/About'

function App() {



  return (
    <div>
    <Router>
      <Switch>
        <Route exact path="/blog#!" component={Blog} />
        <Route exact path = "/" component={Home} />
        <Route exact path = "/Contact" component={Contact} />
        <Route exact path = "/About" component={About} />
      </Switch>
    </Router>
    </div>
  );
}

export default App;

This is index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more:
// <React.StrictMode></React.StrictMode>
reportWebVitals();

I followed a suggestion that I should use HashRouter instead of BrowserRouter. So I added that to my index.js in place of BrowserRouter. That kind of worked. I was able to render another page, but only if navigated to from the root page. I tried to add more pages and it stopped working altogether. I tried replacing BrowserRouter on my App.js with HashRouter and it just made my page go crazy and kept adding and adding hashbangs to the home page. I've moved everything back to BrowserRouter as I feel like it's a good starting point.

My problem is exactly like the issue here:

React Routing works in local machine but not Heroku

Except I'm not using express. I thought maybe I should learn express, but if I'm getting the same problem without it, I don't want to try and learn it if it's not the real problem. In the answer it wants me to add a static.json file to the same folder that has my package.json in. That did not work.

Here are my heroku logs when I try to navigate to a separate page:

2022-01-01T21:31:32.698262+00:00 heroku[router]: at=info method=GET path="/logo192.png" host=url request_id=dcf6710a-8661-4498-af2d-cc50297a5ac5 fwd="70.135.129.116" dyno=web.1 connect=1ms service=3ms status=200 bytes=5609 protocol=http

2022-01-01T21:31:32.703460+00:00 app[web.1]: 10.1.55.189 - - [01/Jan/2022:21:31:32 +0000] "GET /favicon.png HTTP/1.1" 200 0 url "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:95.0) Gecko/20100101 Firefox/95.0"

2022-01-01T21:31:32.705795+00:00 heroku[router]: at=info method=GET path="/favicon.png" host=url request_id=4cd0ba16-2fb0-4130-82a3-ad21f7eb60ea fwd="70.135.129.116" dyno=web.1 connect=0ms service=8ms status=200 bytes=108314 protocol=http

2022-01-01T21:34:51.497118+00:00 heroku[router]: at=info method=GET path="/Blog" host=url request_id=67e9ba38-8b80-403e-8dd0-5972573a2ede fwd="70.135.129.116" dyno=web.1 connect=0ms service=2ms status=404 bytes=393 protocol=http

2022-01-01T21:34:51.498104+00:00 app[web.1]: 10.1.83.5 - - [01/Jan/2022:21:34:51 +0000] "GET /Blog HTTP/1.1" 404 232 url "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:95.0) Gecko/20100101 Firefox/95.0"

2022-01-01T21:34:53.252809+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=url request_id=3275a7f2-ad69-4984-b559-cdced25af5d6 fwd="70.135.129.116" dyno=web.1 connect=0ms service=2ms status=404 bytes=393 protocol=http

2022-01-01T21:34:53.252855+00:00 app[web.1]: 10.1.12.238 - - [01/Jan/2022:21:34:53 +0000] "GET /favicon.ico HTTP/1.1" 404 232 "url" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:95.0) Gecko/20100101 Firefox/95.0"

My static.json page that I've seen as a solution that works for other people but not me:

{
  "root": "build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

React Routing only works on local machine. On Heroku only root page works

0 Answers0