1

I am currently using firebase hosting for my single page React application. I have also added a 404.html page to my public directory. My assumption was that this page would get served if a user enter an url that is not in my routes(using react-router), but there is no way for firebase to know if an url is valid or not, or is there. Currently if I enter something random after the / of my main app url the page just shows blank. Is this something i need to account for within my React app, if so HOW?

jasan
  • 11,475
  • 22
  • 57
  • 97
  • 1
    I expect that your firebase.json contains a `"source": "**"` rewrite, which means that you're rewriting all URLs to your main page. Firebase Hosting has no knowledge that you're using react-router, so it cannot detect an unmatched route. So you'll have to add a default/catchall route to your client-side react-router configuration. This looks promising: http://stackoverflow.com/questions/32128978/react-router-no-not-found-route – Frank van Puffelen Aug 07 '16 at 23:36
  • Any code you can share as to how your router is setup? – KumarM Aug 07 '16 at 23:40

2 Answers2

6

You can partially solve this using firebase.json configuration, but because Firebase Hosting only serves up static content you'll have to handle some of the logic in your JavaScript. A simple catch-all looks like:

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

However, you can create more specific rewrites to match your application's route structure, for instance:

{
  "hosting":{
    "rewrites":[
      {"source":"/users/*","destination":"/index.html"},
      {"source":"/account","destination":"/index.html"},
      {"source":"/posts/*","destination":"/index.html"},
    ]
  }
}

In the above example, /users/foo would route to /index.html but /unknown/url would route to 404.html.

The above gets you part of the way there, but doesn't know about your actual application data. If /users/foo is not a valid username, you'll need to display a not found message using JavaScript in /index.html.

Michael Bleigh
  • 25,334
  • 2
  • 79
  • 85
2

You can let the React Router take care of serving a 404 page on the client side. This is how you can setup:

var NotFound = React.createClass({
    render: function() {
        return (<h1>Page Not Found</h1>);
    }
});

var App = React.createClass({
    render: function() {
        <Router history={browserHistory}>
            <Route path="/" component={App}>
                <Route path="first" component={SomeComponent}/>
                <Route path="second" component={SomeOtherComponent}/>
                <Route path="*" component={NotFound}/>
            </Route>
        </Router>
    }

});

Note that the catch all route (*) should be the last so that React Router can try all others and finally get to this.

Here's a nice article that explains this.

KumarM
  • 1,669
  • 1
  • 18
  • 26
  • But be aware that this will not respond with HTTP 404. If you need a correct HTTP status code, you'll have to use fine tuned rewrite rules as suggested by Michael Bleigh – Rupert Angermeier Apr 25 '19 at 08:48