Create a 404 page. Fixes #71

src/server/index.tsx

@@ -44,6 +44,12 @@ server.get('/*', async (req, res) => {
   let site: GetSiteResponse = resolver[0];
   let routeData = resolver.slice(1, resolver.length);
 
+  // Redirect to the 404 if there's an API error
+  if (routeData[0] && routeData[0].error) {
+    console.log(`Route error: ${routeData[0].error}`);
+    return res.redirect('/404');
+  }
+
   let acceptLang = req.headers['accept-language']
     ? req.headers['accept-language'].split(',')[0]
     : 'en';

src/shared/components/app.tsx

@@ -3,11 +3,12 @@ import { Route, Switch } from 'inferno-router';
 import { Provider } from 'inferno-i18next';
 import { Helmet } from 'inferno-helmet';
 import { i18n } from '../i18next';
-import { routes } from '../../shared/routes';
-import { Navbar } from '../../shared/components/navbar';
-import { Footer } from '../../shared/components/footer';
+import { routes } from '../routes';
+import { Navbar } from './navbar';
+import { Footer } from './footer';
+import { NoMatch } from './no-match';
 import { Theme } from './theme';
-import { Symbols } from '../../shared/components/symbols';
+import { Symbols } from './symbols';
 import { GetSiteResponse } from 'lemmy-js-client';
 import './styles.scss';
 
@@ -48,7 +49,7 @@ export class App extends Component<AppProps, any> {
                     render={props => <C {...props} {...rest} />}
                   />
                 ))}
-                {/* <Route render={(props) => <NoMatch {...props} />} /> */}
+                <Route render={props => <NoMatch {...props} />} />
               </Switch>
               <Symbols />
             </div>

src/shared/components/no-match.tsx

@@ -0,0 +1,15 @@
+import { Component } from 'inferno';
+
+export class NoMatch extends Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  render() {
+    return (
+      <div class="container">
+        <h1>404</h1>
+      </div>
+    );
+  }
+}