[chore] added example with react-router.

examples/basic/app.js

@@ -3,26 +3,34 @@ import ReactDOM from 'react-dom';
 import Modal from 'react-modal';
 import SimpleUsage from './simple_usage';
 import MultipleModals from './multiple_modals';
+import ReactRouter from './react-router';
 
 const appElement = document.getElementById('example');
 
 Modal.setAppElement('#example');
 
 const examples = [
   SimpleUsage,
-  MultipleModals
+  MultipleModals,
+  ReactRouter
 ];
 
-function App(props) {
-  return examples.map((example, key) => {
-    const ExampleApp = example.app;
+class App extends Component {
+  render() {
     return (
-      <div key={key} className="example">
-        <h3>{example.label}</h3>
-        <ExampleApp />
+      <div>
+        {examples.map((example, key) => {
+          const ExampleApp = example.app;
+          return (
+            <div key={key} className="example">
+              <h3>{example.label}</h3>
+              <ExampleApp />
+            </div>
+          );
+        })}
       </div>
     );
-  });
+  }
 }
 
-ReactDOM.render(<App/>, appElement);
+ReactDOM.render(<App />, appElement);

examples/basic/react-router/index.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import createHistory from 'history/createBrowserHistory';
+import { Router, Route, Switch } from 'react-router';
+import { Link } from 'react-router-dom';
+import Modal from 'react-modal';
+
+const history = createHistory();
+
+const Content = label => () => <p>{`Content ${label}`}</p>;
+
+const shouldOpenModal = locationPath => /\bmodal\b/.test(locationPath);
+
+const ReactRouterModal = props => (
+  <Modal
+    isOpen={shouldOpenModal(props.location.pathname)}
+    onRequestClose={() => history.push("/basic")}>
+    <div>
+      <Link to="/basic/modal/a">Link A</Link><br />
+      <Link to="/basic/modal/b">Link B</Link>
+      <div>
+        <Switch location={props.location}>
+          <Route path="/basic/modal/a" component={Content('A')} />
+          <Route path="/basic/modal/b" component={Content('B')} />
+        </Switch>
+      </div>
+    </div>
+  </Modal>
+);
+
+class App extends Component {
+  render() {
+    return (
+      <Router history={history}>
+        <div>
+          <Link to="/basic/modal" className="btn btn-primary">Modal</Link>
+          <Route path="/basic/modal" component={ReactRouterModal} />
+        </div>
+      </Router>
+    );
+  }
+}
+
+export default {
+  label: "#3. react-modal and react-router.",
+  app: App
+};

package.json

@@ -48,6 +48,8 @@
     "npm-run-all": "^4.1.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
     "should": "^13.1.0",
     "sinon": "next",
     "uglify-js": "3.1.1",

webpack.config.js

@@ -29,7 +29,7 @@ module.exports = {
   output: {
     filename: '[name].js',
     chunkFilename: '[id].chunk.js',
-    path: 'examples/__build__',
+    path: path.resolve(__dirname, './examples/__build__'),
     publicPath: '/__build__/'
   },
 
@@ -46,7 +46,7 @@ module.exports = {
   },
 
   plugins: [
-    new webpack.optimize.CommonsChunkPlugin('shared.js'),
+    new webpack.optimize.CommonsChunkPlugin('shared'),
     new webpack.LoaderOptionsPlugin({ debug: true })
   ]