Why doesn't the React Router correctly handle my routes?

Created speaker.js inside the components folder:

var React = require('react');

var Speaker = React.createClass({
  render() {
    return (<h1>Speaker</h1>);
  }
});

app-client.js import required modules and create route handler:

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;

var APP = require('./components/APP');
var Speaker = require('./components/speaker');

var routes = (
  <Route handler={APP}>
    <DefaultRoute handler={audience} />
    <Route name="speaker" path="speaker" handler={speaker}></Route>
</Route>
);

app-server.js create title variable to be replaced by those in speaker component:

var express = require('express');
var app = express();

var connections = [];
var title = 'Untitled Presentation';

app.use(express.static('./public'));
app.use(express.static('./node_modules/bootstrap/dist'));

var server = app.listen(3000);
var io = require('socket.io').listen(server);

io.sockets.on('connection', function(socket) {

  socket.once('disconnect', function() {
    connections.splice(connections.indexOf(socket), 1);
    socket.disconnect();
    console.log("Disconnected: %s sockets remaining.",   connections.length);
});

  socket.emit('welcome', {
    title: title
  });

  connections.push(socket);
  console.log("Connected: %s sockets connected", connections.length);

});

console.log('Polling server is running at PORT 3000');


Router.run(routes, function(handler) {
  ReactDOM.render(<handler />, document.getElementById('react-  container'));
});

module.exports = speaker; Folder Structure:

app-client.js
app-server.js
components
  - app.js
  - speaker.js
public
  - bundle.js
  - index.html
  - style.css
webpack.config.js
package.json

via lookininward