router

src/ts/@overflow/app/index.tsx

@@ -41,7 +41,12 @@ class Application {
     this.history = history;
   }
 
-  public async start(): Promise<void> {
+  public static async Run(): Promise<void> {
+    let application = new Application();
+    return application.start();
+  }
+
+  private async start(): Promise<void> {
     try {
       this.container = await Platform.getAppContainer(this.config.container.placeholderID);
       this.displayLoading();
@@ -59,7 +64,7 @@ class Application {
     }
   }
 
-  public initContext(): Promise<AppContext> {
+  private initContext(): Promise<AppContext> {
     const appContext = new Promise<AppContext>(resolve => {
       const context = AppContext.getContext();
       resolve(context);
@@ -68,7 +73,7 @@ class Application {
     return appContext;
   }
 
-  public initRpcClient(): Promise<WebSocketRPC> {
+  private initRpcClient(): Promise<WebSocketRPC> {
     const rpcClient = new Promise<WebSocketRPC>((resolve, reject) => {
       let client = new WebSocketRPC(this.config.rpc.url);
       client.initialize()
@@ -83,7 +88,7 @@ class Application {
     return rpcClient;
   }
 
-  public initSagaEffect(): Promise<void> {
+  private initSagaEffect(): Promise<void> {
     const rpcClient = new Promise<void>(resolve => {
       this.sagaMiddleware.run(sagas);
       resolve();
@@ -139,6 +144,4 @@ class Application {
 
 }
 
-let application = new Application();
-application.start();
-
+Application.Run();

src/ts/@overflow/app/views/App.tsx

@@ -3,6 +3,9 @@ import { Route, Switch } from 'react-router-dom';
 
 import AccountLayout from './layout/AccountLayout';
 import AppLayout from './layout/AppLayout';
+import ErrorLayout from './layout/ErrorLayout';
+
+
 
 import TempLayout from './layout/TempLayout';
 
@@ -20,6 +23,7 @@ class App extends React.Component<Props, State> {
   public render(): JSX.Element {
     return (
       <Switch>
+        <Route path='/error' component={ErrorLayout}/>
         <Route path='/temp' component={TempLayout}/>
         <Route path='/account' component={AccountLayout}/>
         <Route path='/' component={AppLayout}/>

src/ts/@overflow/app/views/error/Error404.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { RouteComponentProps, RouteProps, Route, Switch } from 'react-router-dom';
+
+export interface Props extends RouteComponentProps<any> {
+}
+export interface State {
+}
+
+class Error404 extends React.Component<Props, State> {
+
+  public constructor(props?: Props, context?: State) {
+    super(props, context);
+
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div>
+        URL is not exist.
+      </div>
+    );
+  }
+
+}
+
+
+export default Error404;

src/ts/@overflow/app/views/layout/AppLayout.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RouteComponentProps, RouteProps, Route } from 'react-router-dom';
+import { Redirect, RouteComponentProps, RouteProps, Route, Switch } from 'react-router-dom';
 import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb, Grid, Dropdown } from 'semantic-ui-react';
 import { Header } from './Header';
 import { Footer } from './Footer';
@@ -34,8 +34,10 @@ export class AppLayout extends React.Component<Props, State> {
         <LeftMenu />
         <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
           <Header />
-            <Route path={`${this.props.match.url}`} component={Home}/>
-
+            <Switch>
+              <Route exact={true} path={`${this.props.match.url}`} component={Home}/>
+              <Redirect to='/error/404' />
+            </Switch>
           <Footer />
         </Segment>
       </Container >

src/ts/@overflow/app/views/layout/ErrorLayout.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { RouteComponentProps, RouteProps, Route, Switch } from 'react-router-dom';
+
+import Error404 from '../error/Error404';
+
+export interface Props extends RouteComponentProps<any> {
+}
+export interface State {
+}
+
+class ErrorLayout extends React.Component<Props, State> {
+
+  public constructor(props?: Props, context?: State) {
+    super(props, context);
+
+  }
+
+  public render(): JSX.Element {
+    return (
+        <Switch>
+          <Route path={`${this.props.match.url}/404`} component={Error404}/>
+        </Switch>
+    );
+  }
+
+}
+
+
+export default ErrorLayout;