Add code to use react-router

README.md

@@ -7,7 +7,7 @@ A template for writing React based ECMAScript 2015 (ES6) + Redux + React Router
 - [x] [Webpack](https://webpack.github.io)
 - [x] [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard)
 - [x] [React](https://facebook.github.io/react/)
-- [ ] [React Router](https://github.com/ReactTraining/react-router)
+- [x] [React Router](https://github.com/ReactTraining/react-router)
 - [ ] [Redux](https://github.com/reactjs/redux)
 - [x] [React Hot Loader](https://github.com/gaearon/react-hot-loader)
 - [x] [Jest](https://facebook.github.io/jest/) for tests and [Chai](http://chaijs.com/) for assertions

package.json

@@ -11,7 +11,7 @@
   },
   "devDependencies": {
     "@kadira/storybook": "^2.35.1",
-    "autoprefixer": "^6.5.4",
+    "autoprefixer": "^6.6.0",
     "babel-core": "^6.21.0",
     "babel-eslint": "^7.1.1",
     "babel-jest": "^18.0.0",
@@ -46,7 +46,7 @@
     "webpack": "^1.14.0",
     "webpack-dashboard": "^0.2.0",
     "webpack-dev-server": "^1.16.2",
-    "webpack-merge": "^1.1.2",
+    "webpack-merge": "^2.0.0",
     "webpack-validator": "^2.3.0"
   },
   "dependencies": {
@@ -56,6 +56,8 @@
     "react": "^15.4.1",
     "react-bootstrap": "^0.30.7",
     "react-dom": "^15.4.1",
-    "react-prop-types": "^0.4.0"
+    "react-prop-types": "^0.4.0",
+    "react-router": "^3.0.0",
+    "react-router-bootstrap": "^0.23.1"
   }
 }

src/components/About/About.js

@@ -0,0 +1,27 @@
+/**
+ *   Copyright 2017 OSBI Ltd
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+import React, { Component } from 'react';
+
+class About extends Component {
+  render() {
+    return (
+      <p>Page about</p>
+    );
+  }
+}
+
+export default About;

src/components/About/index.js

@@ -0,0 +1,17 @@
+/**
+ *   Copyright 2017 OSBI Ltd
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+export { default } from './About.js';

src/components/App/App.js

@@ -21,7 +21,7 @@ import {
   Nav,
   NavItem
 } from 'react-bootstrap';
-import Title from '../Title';
+import { LinkContainer } from 'react-router-bootstrap';
 
 import style from './App.styl';
 
@@ -38,16 +38,21 @@ class App extends Component {
           </Navbar.Header>
           <Navbar.Collapse>
             <Nav>
-              <NavItem eventKey={1} href="#">Home</NavItem>
-              <NavItem eventKey={2} href="#">About</NavItem>
-              <NavItem eventKey={3} href="#">Contact</NavItem>
+              <LinkContainer to="/">
+                <NavItem eventKey={1}>Home</NavItem>
+              </LinkContainer>
+              <LinkContainer to="/about">
+                <NavItem eventKey={2}>About</NavItem>
+              </LinkContainer>
+              <LinkContainer to="/contact">
+                <NavItem eventKey={3}>Contact</NavItem>
+              </LinkContainer>
             </Nav>
           </Navbar.Collapse>
         </Navbar>
         <Grid>
           <div className={style.App}>
-            <Title>My App</Title>
-            <p className="lead">Use this document as a way to quickly start any new project.</p>
+            {React.cloneElement(this.props.children, this.props)}
           </div>
         </Grid>
       </div>

src/components/Contact/Contact.js

@@ -0,0 +1,27 @@
+/**
+ *   Copyright 2017 OSBI Ltd
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+import React, { Component } from 'react';
+
+class Contact extends Component {
+  render() {
+    return (
+      <p>Page contact</p>
+    );
+  }
+}
+
+export default Contact;

src/components/Contact/index.js

@@ -0,0 +1,17 @@
+/**
+ *   Copyright 2017 OSBI Ltd
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+export { default } from './Contact.js';

src/components/Home/Home.js

@@ -0,0 +1,33 @@
+/**
+ *   Copyright 2017 OSBI Ltd
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+import React, { Component } from 'react';
+import Title from '../Title';
+
+class Home extends Component {
+  render() {
+    return (
+      <div>
+        <Title>My App</Title>
+        <p className="lead">
+          Use this document as a way to quickly start any new project.
+        </p>
+      </div>
+    );
+  }
+}
+
+export default Home;

src/components/Home/index.js

@@ -0,0 +1,17 @@
+/**
+ *   Copyright 2017 OSBI Ltd
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+export { default } from './Home.js';

src/containers/Root.js

@@ -0,0 +1,32 @@
+/**
+ *   Copyright 2017 OSBI Ltd
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+import React, { Component } from 'react';
+import {
+  Router,
+  browserHistory
+} from 'react-router';
+import routes from '../routes';
+
+class Root extends Component {
+  render() {
+    return (
+      <Router history={browserHistory} routes={routes} />
+    );
+  }
+}
+
+export default Root;

src/index.js

@@ -17,26 +17,26 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
-import App from './components/App';
+import Root from './containers/Root';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'font-awesome/css/font-awesome.min.css';
 import './styl/saiku.styl';
 
-const renderApp = (NextApp) => {
+const renderApp = (NewRoot) => {
   render(
     <AppContainer>
-      <NextApp />
+      <NewRoot />
     </AppContainer>,
     document.querySelector('[data-js="app"]')
   );
 };
 
-renderApp(App);
+renderApp(Root);
 
 if (module.hot) {
-  module.hot.accept('./components/App', () => {
-    const NextApp = require('./components/App').default;
-    renderApp(NextApp);
+  module.hot.accept('./containers/Root', () => {
+    const NewRoot = require('./containers/Root').default;
+    renderApp(NewRoot);
   });
 }

src/routes.js

@@ -0,0 +1,33 @@
+/**
+ *   Copyright 2017 OSBI Ltd
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+import React from 'react';
+import {
+  Route,
+  IndexRoute
+} from 'react-router';
+import App from './components/App';
+import Home from './components/Home';
+import About from './components/About';
+import Contact from './components/Contact';
+
+export default (
+  <Route path="/" component={App}>
+    <IndexRoute component={Home} />
+    <Route path="/about" component={About} />
+    <Route path="/contact" component={Contact} />
+  </Route>
+);