'React-router did not work on production

there,

I am using react-router for this app. It works fine on my local server. Here is the code:

var routes = (
 <Router history={browserHistory}>
  <Route path="/" component={App} />
  <Route path="/concepts" component={Concepts} />
  <Route path="/ssdb" component={SolarSystem} />
  <Route path="/missions" component={Missions} />
 </Router>
)

However, when i use webpack to deploy to firebase server, the route did not work anymore. The url says"This file does not exist and there was no index.html found in the current directory or 404.html in the root directory."

Am I missing anything? Thanks!



Solution 1:[1]

It turns out we need to add the rewrites to the firebase.json. Hope it helps with other people's similar issue.

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

Solution 2:[2]

The below solution helped me resolve the same issue for me

{
      "hosting": {
        "public": "build",
        "rewrites": [
          {
            "source": "**",
            "destination": "/index.html"
          }
        ],
        "ignore": [
          "firebase.json",
          "**/.*",
          "**/node_modules/**"
        ]
      }
    }

enter image description here

Solution 3:[3]

You can update index.js file

<BrowserRouter> <App/></BrowserRouter>

Now it will be working.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lisa
Solution 2 Abdullah
Solution 3 Md Asgor Ali