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 (
-
-
{example.label}
-
+
+ {examples.map((example, key) => {
+ const ExampleApp = example.app;
+ return (
+
+
{example.label}
+
+
+ );
+ })}
);
- });
+ }
}
-ReactDOM.render(
, appElement);
+ReactDOM.render(
, 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 => () =>
{`Content ${label}`}
;
+
+const shouldOpenModal = locationPath => /\bmodal\b/.test(locationPath);
+
+const ReactRouterModal = props => (
+
history.push("/basic")}>
+
+
Link A
+
Link B
+
+
+
+
+
+
+
+
+);
+
+class App extends Component {
+ render() {
+ return (
+
+
+ Modal
+
+
+
+ );
+ }
+}
+
+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 })
]