router

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RouteComponentProps, RouteProps, Route } from 'react-router-dom';
+import { RouteComponentProps, RouteProps, Route, Switch } from 'react-router-dom';
 
 import SignIn from '../member/SignIn';
 import SignUp from '../member/SignUp';
@@ -20,12 +20,12 @@ class AccountLayout extends React.Component<Props, State> {
 
   public render(): JSX.Element {
     return (
-        <div>
+        <Switch>
           <Route path={`${this.props.match.url}/signin`} component={SignIn}/>
           <Route path={`${this.props.match.url}/signup`} component={SignUp}/>
           <Route path={`${this.props.match.url}/check_email`} component={EmailConfirm}/>
           <Route path={`${this.props.match.url}/forgot_password`} component={ForgotPassword}/>
-        </div>
+        </Switch>
     );
   }
 

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

@@ -3,7 +3,7 @@ import { RouteComponentProps, RouteProps, Route } 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';
-import { LeftMenu } from './LeftMenu';
+import LeftMenu from './LeftMenu';
 
 import Home from '../Home';
 

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb, Grid, Dropdown } from 'semantic-ui-react';
 import { Header } from './Header';
 import { Footer } from './Footer';
-import { LeftMenu } from './LeftMenu';
+import LeftMenu from './LeftMenu';
 
 // import { Routes } from './Routes';
 

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

@@ -1,12 +1,27 @@
 import * as React from 'react';
+import { connect, Dispatch } from 'react-redux';
+import { push as routerPush } from 'react-router-redux';
+
 import { Container, Menu, Dropdown, Segment, Icon, Header, Image } from 'semantic-ui-react';
 
 import { LogoBar } from './LogoBar';
 import { TitleBar } from './TitleBar';
 
-export class LeftMenu extends React.Component<any, any> {
+export interface StateProps {
+}
 
-  constructor(props: any, context: any) {
+export interface DispatchProps {
+  onChangeUrl?(url: string): void;
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+}
+
+class LeftMenu extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
     super(props, context);
     this.state = {
     };
@@ -36,7 +51,7 @@ export class LeftMenu extends React.Component<any, any> {
             <Header inverted sub icon='bar graph' content='Monitoring' />
           </Menu.Header>
           <Menu.Menu>
-            <Menu.Item href='#/temp/probe' style={{ 'marginLeft': '30px' }}>Probe</Menu.Item>
+            <Menu.Item onClick={(e) => this.props.onChangeUrl('/temp/probe')} style={{ 'marginLeft': '30px' }}>Probe</Menu.Item>
             <Menu.Item href='#/' style={{ 'marginLeft': '30px' }}>Sensors</Menu.Item>
           </Menu.Menu>
         </Menu.Item>
@@ -99,4 +114,18 @@ export class LeftMenu extends React.Component<any, any> {
 }
 
 
+export function mapStateToProps(state: any): StateProps {
+  return {
 
+  };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
+  return {
+    onChangeUrl: (url: string): void => {
+      dispatch(routerPush(url));
+    },
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LeftMenu);

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

@@ -3,7 +3,7 @@ import { RouteComponentProps, RouteProps, Route } 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';
-import { LeftMenu } from './LeftMenu';
+import LeftMenu from './LeftMenu';
 
 import ProbeList from '../monitoring/probe/List';