React router can correctly route routes in WordPress.

assets/js/src/newsletters/newsletters.jsx

@@ -0,0 +1,80 @@
+define(
+  'newsletters',
+  ['react', 'react-router', 'mailpoet'],
+  function(React, Router, MailPoet) {
+
+    var DefaultRoute = Router.DefaultRoute;
+    var Link = Router.Link;
+    var Route = Router.Route;
+    var RouteHandler = Router.RouteHandler;
+
+    var App = React.createClass({
+      render: function() {
+        return (
+          <div>
+            <header>
+              <ul>
+                <li>
+                  <Link to="app">Dashboard</Link>
+                </li>
+                <li>
+                  <Link to="inbox">Inbox</Link>
+                </li>
+                <li>
+                  <Link to="calendar">Calendar</Link>
+                </li>
+              </ul>
+              Logged in as Marco
+            </header>
+
+            <RouteHandler/>
+          </div>
+        );
+      }
+    });
+
+    var Dashboard = React.createClass({
+      render: function () {
+        return (
+          <div>
+            <h1>Dashboard</h1>
+          </div>
+        );
+      }
+    });
+
+    var Inbox = React.createClass({
+      render: function () {
+        return (
+          <div>
+            <h1>Inbox</h1>
+          </div>
+        );
+      }
+    });
+
+    var Calendar = React.createClass({
+      render: function () {
+        return (
+          <div>
+            <h1>Calendar</h1>
+          </div>
+        );
+      }
+    });
+
+    var routes = (
+      <Route name="app" path="/" handler={App}>
+        <Route name="inbox" handler={Inbox}/>
+        <Route name="calendar" handler={Calendar}/>
+        <DefaultRoute handler={Dashboard}/>
+      </Route>
+    );
+
+    var hook = document.getElementById('newsletters');
+    if (hook) {
+      Router.run(routes, function(Handler) {
+        React.render(<Handler/>, hook);
+      });
+    }
+  });

package.json

@@ -26,6 +26,7 @@
     "react-infinity": "^1.2.2",
     "react-prefixr": "^0.1.0",
     "react-waypoint": "^1.0.2",
+    "react-router": "^0.13.3",
     "select2": "3.5.1",
     "spectrum-colorpicker": "^1.6.2",
     "tinymce": "4.1.10",

views/newsletters.html

@@ -2,7 +2,5 @@
 
 <% block content %>
   <h1><%= 'Newsletters' %></h1>
-  <div id="newsletters_list"></div>
-  <h2><%= 'New' %></h2>
-  <div id="newsletters_form"></div>
+  <div id="newsletters"></div>
 <% endblock %>