From ce2b34e6e79fb0e6d4688ff087e56a98a82a6a42 Mon Sep 17 00:00:00 2001
From: Bruno Dias <dias.h.bruno@gmail.com>
Date: Sat, 23 Sep 2017 16:07:14 -0300
Subject: [PATCH] [chore] added example with react-router.

---
 examples/basic/app.js                | 26 +++++++++------
 examples/basic/react-router/index.js | 47 ++++++++++++++++++++++++++++
 package.json                         |  2 ++
 webpack.config.js                    |  4 +--
 4 files changed, 68 insertions(+), 11 deletions(-)
 create mode 100644 examples/basic/react-router/index.js

diff --git a/examples/basic/app.js b/examples/basic/app.js
index 52eb554a..51e64b32 100644
--- a/examples/basic/app.js
+++ b/examples/basic/app.js
@@ -3,6 +3,7 @@ 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');
 
@@ -10,19 +11,26 @@ 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);
diff --git a/examples/basic/react-router/index.js b/examples/basic/react-router/index.js
new file mode 100644
index 00000000..02f85781
--- /dev/null
+++ b/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
+};
diff --git a/package.json b/package.json
index eeef8456..d3f88361 100644
--- a/package.json
+++ b/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",
diff --git a/webpack.config.js b/webpack.config.js
index 9faa5d97..f02ecd31 100644
--- a/webpack.config.js
+++ b/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 })
   ]