[changed] Support React Router v2.x

.eslintrc

@@ -1,8 +1,8 @@
 {
  "extends": "airbnb",
+ "parser": "babel-eslint",
  "rules": {
  "comma-dangle": 0,
- "eqeqeq": [2, "allow-null"],
- "id-length": 0
+ "eqeqeq": [2, "allow-null"]
  }
 }

README.md

@@ -9,7 +9,7 @@ Integration between [React Router](https://github.com/rackt/react-router) and [R
 Wrap your React-Bootstrap element in a `LinkContainer` to make it behave like a React Router `Link`:
 
 ```js
-<LinkContainer to="/foo" query={{bar: "baz"}}>
+<LinkContainer to={{ pathname: '/foo', query: { bar: 'baz' } }}>
  <Button>Foo</Button>
 </LinkContainer>
 ```
@@ -20,14 +20,16 @@ As with React Router's `Link`, returning `false` from an `onClick` handler on `L
 
 ## Installation
 
+**Note:** Releases from v0.20.0 onward only support React Router v2.x. For React Router 1.x support, use v0.19.3 or earlier.
+
 ```
 npm install react-router-bootstrap
 ```
 
 You will also want to have React Router and React-Bootstrap.
 
 ```
-npm install react-router@latest react-bootstrap
+npm install react-router react-bootstrap
 ```
 
 ## Contributing

package.json

@@ -32,53 +32,53 @@
  },
  "homepage": "https://github.com/react-bootstrap/react-router-bootstrap",
  "peerDependencies": {
- "react": ">=0.13.0",
- "react-router": ">=1.0.0-rc3"
+ "react": ">=0.14.0",
+ "react-router": ">=2.0.0-rc2"
  },
  "devDependencies": {
- "babel": "^5.8.23",
- "babel-core": "^5.8.25",
- "babel-eslint": "^4.1.3",
- "babel-loader": "^5.3.2",
- "bootstrap": "^3.3.5",
+ "babel": "5.x",
+ "babel-core": "5.x",
+ "babel-eslint": "^4.1.6",
+ "babel-loader": "5.x",
+ "bootstrap": "^3.3.6",
  "colors": "^1.1.2",
- "css-loader": "^0.19.0",
- "es5-shim": "^4.1.14",
- "eslint": "^1.7.1",
- "eslint-config-airbnb": "^0.1.0",
- "eslint-plugin-babel": "^2.1.1",
- "eslint-plugin-mocha": "^1.0.0",
- "eslint-plugin-react": "^3.5.1",
- "file-loader": "^0.8.4",
- "history": "^1.12.5",
- "html-webpack-plugin": "^1.6.2",
- "karma": "^0.13.11",
- "karma-cli": "^0.1.1",
- "karma-mocha": "^0.2.0",
- "karma-mocha-reporter": "^1.1.1",
- "karma-phantomjs-launcher": "^0.2.1",
+ "css-loader": "^0.23.1",
+ "es5-shim": "^4.4.1",
+ "eslint": "^1.10.3",
+ "eslint-config-airbnb": "^2.1.1",
+ "eslint-plugin-babel": "^3.0.0",
+ "eslint-plugin-mocha": "^1.1.0",
+ "eslint-plugin-react": "^3.13.1",
+ "file-loader": "^0.8.5",
+ "history": "^1.17.0",
+ "html-webpack-plugin": "^1.7.0",
+ "karma": "^0.13.16",
+ "karma-cli": "^0.1.2",
+ "karma-mocha": "^0.2.1",
+ "karma-mocha-reporter": "^1.1.5",
+ "karma-phantomjs-launcher": "^0.2.2",
  "karma-sinon-chai": "^1.1.0",
  "karma-sourcemap-loader": "^0.3.6",
  "karma-webpack": "^1.7.0",
  "less": "^2.5.3",
- "less-loader": "^2.2.1",
+ "less-loader": "^2.2.2",
  "lodash": "^3.10.1",
- "mocha": "^2.3.3",
+ "mocha": "^2.3.4",
  "mt-changelog": "^0.6.2",
  "node-libs-browser": "^0.5.3",
- "phantomjs": "^1.9.18",
- "react": "^0.14.0",
- "react-bootstrap": "^0.27.2",
- "react-dom": "^0.14.0",
- "react-router": "^1.0.0-rc3",
- "release-script": "^0.5.4",
- "rimraf": "^2.4.3",
+ "phantomjs": "^1.9.19",
+ "react": "^0.14.5",
+ "react-bootstrap": "^0.28.1",
+ "react-dom": "^0.14.5",
+ "react-router": "^2.0.0-rc4",
+ "release-script": "^0.5.6",
+ "rimraf": "^2.5.0",
  "shelljs": "^0.5.3",
- "style-loader": "^0.12.4",
- "url-loader": "^0.5.6",
- "webpack": "^1.12.2",
- "webpack-dev-server": "^1.12.0",
- "yargs": "^3.27.0"
+ "style-loader": "^0.13.0",
+ "url-loader": "^0.5.7",
+ "webpack": "^1.12.9",
+ "webpack-dev-server": "^1.14.0",
+ "yargs": "^3.31.0"
  },
  "files": [
  "README",

src/LinkContainer.js

@@ -1,7 +1,7 @@
 // This is largely taken from react-router/lib/Link.
 
 import React from 'react';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 
 export default class LinkContainer extends React.Component {
  constructor(props, context) {
@@ -24,23 +24,15 @@ export default class LinkContainer extends React.Component {
  }
 
  render() {
- const {history} = this.context;
- const {onlyActiveOnIndex, to, query, hash, children, ...props} =
- this.props;
-
- delete props.state;
+ const { router } = this.context;
+ const { onlyActiveOnIndex, to, children, ...props } = this.props;
 
  props.onClick = this.onClick;
 
- // Ignore if rendered outside the context of history, simplifies unit testing.
- if (history) {
- props.href = history.createHref(to, query);
-
- if (hash) {
- props.href += hash;
- }
-
- props.active = history.isActive(to, query, onlyActiveOnIndex);
+ // Ignore if rendered outside Router context; simplifies unit testing.
+ if (router) {
+ props.href = router.createHref(to);
+ props.active = router.isActive(to, onlyActiveOnIndex);
  }
 
  return React.cloneElement(React.Children.only(children), props);
@@ -49,17 +41,17 @@ export default class LinkContainer extends React.Component {
 
 LinkContainer.propTypes = {
  onlyActiveOnIndex: React.PropTypes.bool.isRequired,
- to: React.PropTypes.string.isRequired,
- query: React.PropTypes.object,
- hash: React.PropTypes.string,
- state: React.PropTypes.object,
+ to: React.PropTypes.oneOfType([
+  React.PropTypes.string,
+  React.PropTypes.object,
+ ]).isRequired,
  onClick: React.PropTypes.func,
  disabled: React.PropTypes.bool.isRequired,
  children: React.PropTypes.node.isRequired
 };
 
 LinkContainer.contextTypes = {
- history: React.PropTypes.object
+ router: React.PropTypes.object
 };
 
 LinkContainer.defaultProps = {

tests/IndexLinkContainer.spec.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import * as ReactBootstrap from 'react-bootstrap';
 import ReactDOM from 'react-dom';
-import {IndexRoute, Route, Router} from 'react-router';
+import { IndexRoute, Route, Router } from 'react-router';
 
 import IndexLinkContainer from '../src/IndexLinkContainer';
 

tests/LinkContainer.spec.js

@@ -1,9 +1,9 @@
-import createMemoryHistory from 'history/lib/createMemoryHistory';
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import * as ReactBootstrap from 'react-bootstrap';
 import ReactDOM from 'react-dom';
-import {Route, Router} from 'react-router';
+import { Route, Router } from 'react-router';
+import createMemoryHistory from 'react-router/lib/createMemoryHistory';
 
 import LinkContainer from '../src/LinkContainer';
 
@@ -23,7 +23,13 @@ describe('LinkContainer', () => {
  <Route
  path="/"
  component={() => (
- <LinkContainer to="/foo" query={{bar: 'baz'}} hash="#the-hash">
+ <LinkContainer
+ to={{
+ pathname: '/foo',
+ query: { bar: 'baz' },
+ hash: '#the-hash'
+ }}
+ >
  <Component>Foo</Component>
  </LinkContainer>
  )}
@@ -43,7 +49,12 @@ describe('LinkContainer', () => {
  <Route
  path="/"
  component={() => (
- <LinkContainer to="/foo" query={{bar: 'baz'}}>
+ <LinkContainer
+ to={{
+ pathname: '/foo',
+ query: { bar: 'baz' }
+ }}
+ >
  <Component>Foo</Component>
  </LinkContainer>
  )}
@@ -84,7 +95,7 @@ describe('LinkContainer', () => {
  const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(
  router, 'A'
  );
- ReactTestUtils.Simulate.click(anchor, {button: 0});
+ ReactTestUtils.Simulate.click(anchor, { button: 0 });
 
  const target = ReactTestUtils.findRenderedDOMComponentWithClass(
  router, 'target'
@@ -116,7 +127,7 @@ describe('LinkContainer', () => {
  const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(
  router, 'A'
  );
- ReactTestUtils.Simulate.click(anchor, {button: 0});
+ ReactTestUtils.Simulate.click(anchor, { button: 0 });
 
  expect(onClick).to.have.been.calledOnce;
  expect(childOnClick).to.have.been.calledOnce;
@@ -183,7 +194,7 @@ describe('LinkContainer', () => {
  router, Component
  );
  ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(component),
- {button: 0}
+ { button: 0 }
  );
 
  const target = ReactTestUtils.scryRenderedDOMComponentsWithClass(

tests/visual/ButtonVisual.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
 import Button from 'react-bootstrap/lib/Button';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 
 import LinkContainer from '../../src/LinkContainer';
 

tests/visual/Home.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 
 export default () => (
  <div>

tests/visual/ListGroupItemVisual.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ListGroup from 'react-bootstrap/lib/ListGroup';
 import ListGroupItem from 'react-bootstrap/lib/ListGroupItem';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 
 import LinkContainer from '../../src/LinkContainer';
 

tests/visual/MenuItemVisual.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 import SplitButton from 'react-bootstrap/lib/SplitButton';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 
 import LinkContainer from '../../src/LinkContainer';
 

tests/visual/NavItemVisual.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Nav from 'react-bootstrap/lib/Nav';
 import NavItem from 'react-bootstrap/lib/NavItem';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 
 import LinkContainer from '../../src/LinkContainer';
 

tests/visual/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import Grid from 'react-bootstrap/lib/Grid';
 import ReactDOM from 'react-dom';
-import {IndexRoute, Route, Router} from 'react-router';
+import { IndexRedirect, Route, Router } from 'react-router';
+import hashHistory from 'react-router/lib/hashHistory';
 
 import ButtonVisual from './ButtonVisual';
 import Home from './Home';
@@ -11,7 +12,7 @@ import NavItemVisual from './NavItemVisual';
 
 import 'bootstrap/less/bootstrap.less';
 
-const App = ({children}) => (
+const App = ({ children }) => (
  <Grid>
  <h1>React-Router-Bootstrap Module Visual Test</h1>
  {children}
@@ -22,9 +23,9 @@ const mountNode = document.createElement('div');
 document.body.appendChild(mountNode);
 
 ReactDOM.render(
- <Router>
+ <Router history={hashHistory}>
  <Route path="/" component={App}>
- <IndexRoute onEnter={(_, replaceWith) => replaceWith(null, '/home')} />
+ <IndexRedirect to="/home" />
  <Route path="home" component={Home} />
 
  <Route path="button" component={ButtonVisual} />

webpack.config.babel.js

@@ -1,7 +1,7 @@
 import webpack from 'webpack';
 import yargs from 'yargs';
 
-const {optimizeMinimize} = yargs.alias('p', 'optimize-minimize').argv;
+const { optimizeMinimize } = yargs.alias('p', 'optimize-minimize').argv;
 const nodeEnv = optimizeMinimize ? 'production' : 'development';
 
 export default {
@@ -16,7 +16,7 @@ export default {
  },
  module: {
  loaders: [
- {test: /\.js$/, loader: 'babel', exclude: /node_modules/}
+ { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
  ]
  },
  externals: [
@@ -39,7 +39,7 @@ export default {
  ],
  plugins: [
  new webpack.DefinePlugin({
- 'process.env': {'NODE_ENV': JSON.stringify(nodeEnv)}
+ 'process.env': { 'NODE_ENV': JSON.stringify(nodeEnv) }
  })
  ],
  devtool: optimizeMinimize ? 'source-map' : null

webpack.test.config.babel.js

@@ -4,7 +4,7 @@ export default {
  },
  module: {
  loaders: [
- {test: /\.js/, loader: 'babel', exclude: /node_modules/}
+ { test: /\.js/, loader: 'babel', exclude: /node_modules/ }
  ]
  },
  devtool: 'inline-source-map'

webpack.visual.config.babel.js

@@ -4,10 +4,10 @@ export default {
  entry: './tests/visual',
  module: {
  loaders: [
- {test: /\.js/, loader: 'babel', exclude: /node_modules/},
- {test: /\.less$/, loader: 'style!css!less'},
- {test: /\.woff|\.woff2$/, loader: 'url?prefix=font/&limit=5000'},
- {test: /\.eot$|\.ttf$|\.svg$/, loader: 'file?prefix=font/'}
+ { test: /\.js/, loader: 'babel', exclude: /node_modules/ },
+ { test: /\.less$/, loader: 'style!css!less' },
+ { test: /\.woff|\.woff2$/, loader: 'url?prefix=font/&limit=5000' },
+ { test: /\.eot$|\.ttf$|\.svg$/, loader: 'file?prefix=font/' }
  ]
  },
  plugins: [