reactjs - React Routes Not working on Heroku, but Are working Locally

Question

This question has been answered a million times by others, but so far nothing seems to work. Most of the answers included code for a server.js file. My app, which has a backend of Ruby on Rails and Frontend with JavaScript and React, doesn't have a server.js file. My question is, should it have one to fix the problem of routes not working on Heroku but working locally? And if not, how can this problem be fixed? It's frustrating should I need to create a server.js file when everything works perfectly when I navigate to the other routes with links (just not when I go directly to the url) but of course if I need to I will. I just never learned about this file until now.

App.js below

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import 'semantic-ui-css/semantic.min.css';
import Articles from './components/Articles'
import Home from './components/Home'
import NotFound from './components/NotFound'
import NavBar from './components/Navbar'
import ChessBoard from './components/chess/ChessBoard'
import Info from './components/Info'
import './App.scss'

class App extends Component {
  render () {
    return <div className="app">
      <div className="router">
      <Router>
        <NavBar/>
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/articles' exact component={Articles} />
        <Route path='/chess' exact component={ChessBoard} />
        <Route path='/info' exact component={Info} />
        <Route component={NotFound} />
      </Switch>
    </Router>
    </div>
    </div>
  }
}

export default App

And, I added a static.json file, with and without the clean_urls setting.

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

Thanks

question from:https://stackoverflow.com/questions/65839899/react-routes-not-working-on-heroku-but-are-working-locally

Answer 1

Generally speaking, router working in development mode and not working in production mode is caused by wrong use of publicPath (or basepath in some build tools).

You have given me so little information that I can only make subjective guesses

Your frontend work in local just because it is served at /, not work in remote server, because it is served under a base path such as /app. In most build tools, default basepath is /.

If you are using webpack, use publicPath setting.

Update: Since you are using React-router, use basename.