title: react routing. cant get this to work
body: <p>I have the following react modules and classes,   I have User module, Users module, Add User module which adds a new user and The App container module for displaying users and static common file which has api urls. but the routing doesn't seem to work. any idea?  </p>
  
  <p>user.jsx - defines a user. it has its get, put, post, delete functions</p>
  
  <pre><code>'use strict';
  import React, {Component}   from 'react';
  import PropTypes            from 'prop-types';
  import axios                from 'axios';
  var Base                    = require('../Statics.Common');
  
  export default class User extends Component {
      static get propTypes() {
          return {
              user: PropTypes.object,
              getAllUsers: PropTypes.func
          }
      }
  
      constructor(props) {
          super(props);
          this.user = this.props.user;
          this.getAllUsers = this.props.getAllUsers;
      }
  
      update(id, name) {
          var updatedName = prompt("Please enter updated name:", name);
          axios.put(Base.API + '/' + id, {name: updatedName}).then(results =&gt; {
              if(results.status == 200) {
                  this.getAllUsers();
              }
          })
      }
  
      delete(id) {
          axios.delete(Base.API + '/' + id).then(results =&gt; {
              if(results.status == 200) {
                  this.getAllUsers();
              }
          })
      }
  
      render() {
          return &lt;tr&gt;
              &lt;td&gt;{this.user._id || this.user.id}&lt;/td&gt;
              &lt;td&gt;{this.user.name}&lt;/td&gt;
              &lt;button onClick={(e) =&gt; this.update(this.user._id || this.user.id, this.user.name)}&gt;Update&lt;/button&gt;&amp;nbsp;
              &lt;button onClick={(e) =&gt; this.delete(this.user._id || this.user.id)}&gt;Delete&lt;/button&gt;
          &lt;/tr&gt;
      }
  }
  
  Users.jsx - users module renders list of users into a ui
   the
  'use strict';
  import React, {Component}   from 'react';
  import PropTypes            from 'prop-types';
  import User                 from './User.jsx';
  
  
  export default class Users extends Component {
    static get propTypes() {
      return {
        users: PropTypes.array
      }
    }
  
    constructor(props) {
      super(props);
    }
  
    componentWillReceiveProps(props) {
      this.setState(props)
    }
  
    render() {
      this.users = this.props.users;
      return &lt;div&gt;
        &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;ID&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            {
              this.users.map(user =&gt; {
                return &lt;User key={user._id || user.id} user={user} getAllUsers={() =&gt; this.props.getAllUsers()}/&gt;
              })
            }
          &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;;
    }
  }
  
  AddUser.jsx - adding a new user
  
  'use strict';
  
  import React, {Component}   from 'react';
  import PropTypes            from "prop-types";
  
  export default class AddUser extends Component {
      static get propTypes() {
          return {
             addUser: PropTypes.func,
             name: PropTypes.string
          }
      }
  
      constructor(props) {
         super(props);
      }
  
      onNameChange(event) {
         event.preventDefault();
         event.stopPropagation();
         this.name = event.target.value;
      }
  
      onSubmit(event) {
          event.preventDefault();
          event.stopPropagation();
          if (this.name) {
             this.props.addUser({name: this.name});
             this.name = '';
          }
      }
  
      render() {
          return &lt;div&gt;
              &lt;form onSubmit={event =&gt; this.onSubmit(event)}&gt;
                 &lt;label&gt;Name:&lt;/label&gt;
                 &lt;input type="text" onChange={event =&gt; this.onNameChange(event)}/&gt;
                 &lt;button type="submit"&gt;Add&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;;
      }
  }
  
  Appcontainer.jsx - the app container for displaying the class
  
  'use strict';
  import  React, {Component}   from 'react';
  import Users                from './Modules/Users';
  import AddUser              from './Controllers/AddUser';
  import axios                from 'axios';
  
  var Base = require('./Statics.Common');
  
  export default class AppContainer extends Component {
      constructor(props) {
          super(props);
          this.state = {
              users: []
          }
          this.getAllUsers();
      }
  
      getAllUsers() {
          axios.get(Base.API + '/').then(res =&gt; {
              this.setState({
                  users: res.data.data || res.data
              });
          })
      }
  
      addUser(user) {
          axios.post(Base.API + '/', {name: user.name}).then(result =&gt; {
              if(result.status == 200) {
                  this.getAllUsers();
              }
          }).catch(err =&gt; {
              alert(err);
          })
      }
  
      render() {
          return &lt;div&gt;
             &lt;h2&gt;Users App&lt;/h2&gt;
              &lt;AddUser addUser={user =&gt; this.addUser(user)}/&gt;
              &lt;Users users={this.state.users} getAllUsers = {() =&gt; this.getAllUsers()}/&gt;
          &lt;/div&gt;;
      }
  }
  
  statics.common.jsx - this has some api urls for node and spring boot
  
  var CommonDetails = function() {
      //this.API = 'http//localhost:8081'; // node api
      this.API = 'http://localhost:8084'; // springboot api
  }
  
  module.exports = new CommonDetails();
  </code></pre>