Fogbugz 3364: Route all 404 pages to dummy page for client side routing

serve.js

@@ -25,6 +25,11 @@ if ( process.env.MODE !== 'development'){
 
 app.use("/api/mongodb", mongodb);
 
+// catch-all route to /page-not-found/index.html defined last to handle page not found error
+app.get('/*', (req, res) => {
+  res.sendFile(__dirname + '/build/page-not-found/index.html');
+})
+
 app.on('error', function (e) {
   // do your thing
   console.log(e);

src/app/App.jsx

@@ -21,6 +21,7 @@ import DeploymentPage from 'pages/DeploymentPage';
 import PushactionPage from 'pages/PushactionPage';
 import PrivacyPolicyPage from 'pages/PrivacyPolicyPage';
 import TermsOfUsePage from 'pages/TermsOfUsePage';
+import NotFound404Page from 'pages/NotFound404Page';
 
 import { WillRoute } from 'hocs';
 import { connectStart } from 'reducers/endpoint';
@@ -49,7 +50,7 @@ class App extends Component {
   render() {
     return (
       <div className="App">
-        <Switch>
+        <Switch>          
           <WillRoute exact path="/" component={ InfoPage }/>
           <WillRoute exact path="/block-list" component={ BlocklistPage }/>
           <WillRoute exact path="/block/:id" component={ BlockdetailPage }/>
@@ -66,7 +67,8 @@ class App extends Component {
           <WillRoute exact path="/push-action" component={ PushactionPage }/>
           <WillRoute exact path="/privacy-policy" component={ PrivacyPolicyPage }/>
           <WillRoute exact path="/terms-of-use" component={ TermsOfUsePage }/>
-
+          <WillRoute exact path="/page-not-found" component={ NotFound404Page }/>          
+
           <Redirect to="/" />
         </Switch>
       </div>

src/components/Header/Header.jsx

@@ -224,6 +224,9 @@ const Header = (props) => {
             </NavItem>
           </Nav>
         </NavWrapperRow>
+        <div style={{display:"none"}}>
+          <Link to={`/page-not-found`} ></Link>
+        </div>
     </div>
   )
 }

src/pages/NotFound404Page/NotFound404Page.jsx

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import { StandardTemplate } from 'templates';
+
+
+class NotFound404Page extends Component {
+  render() {
+    return (
+      <StandardTemplate>        
+        <div style={{height: '100vh'}}></div>
+      </StandardTemplate>
+    );
+  }
+}
+
+export default NotFound404Page;

src/pages/NotFound404Page/index.js

@@ -0,0 +1,6 @@
+import Loadable from 'react-loadable';
+
+export default Loadable({
+  loader: () => import('./NotFound404Page'),
+  loading: () => false
+});