23

i have this routes in my index.js

 <Router history={customHistory}>
        <div className="row">
            <Switch>
                <Route exact path="/login" component={Login}/>
                <Route path="/home" component={Home}/>
                <Route path="/politicas" component={Policies}/>

                <Redirect exact from="/" to="/login"/>
                <Route exact path="*" status={404} component={NotFound}/>

            </Switch>

        </div>
    </Router>

In local enviroment always works but i have one firebase application, to deploy my firebase project i use:

npm run build

and

firebase deploy

But in firebase app after deep refresh returns 404, the only route that works is "/", What do I have to do to keep the routes always working with any path?

ReyAnthonyRenacia
  • 17,219
  • 5
  • 37
  • 56
Abel Olguin Chavez
  • 1,350
  • 1
  • 12
  • 24

1 Answers1

73

I answer myself, it is necessary to add the following to the file firebase.json

"hosting": {
  // Add the "rewrites" section within "hosting"
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}
Abel Olguin Chavez
  • 1,350
  • 1
  • 12
  • 24
  • Why is the reason because react router doesn't works? – Desarrollalab Oct 14 '20 at 08:22
  • 1
    Firebase has his own server and when you navigate to **/something** the server thinks there is a directory or file in that path so, when you rewrite the file firebase.json like i put in the example all your traffic is going to the index.html file and react router take all these traffic instead. – Abel Olguin Chavez Oct 19 '20 at 06:18
  • this still returns a status code of 200 rather 404 as it should. Any idea how to do it? – Vlad Feb 01 '21 at 22:59
  • Hey thanks for coming back and posting this solution. I was pulling my hair out. Your answer fixed everything. – skypen Nov 03 '21 at 15:16
  • Hey the problem in my case seems to be, that every time I try npm run build and firebase init again - to host it again - firebase.json resets. – Tknoobs Aug 29 '22 at 16:49
  • Great answer thank you so much! I was getting 404 on manual refresh only of my React/Firebase app and this fixed it in a jiffy. Great post!! – rolandforbes Mar 22 '23 at 18:59