Skip to content

Commit 483a863

Browse files
taiontaion
committed
[changed] Support React Router v2.x
1 parent faf6558 commit 483a863

15 files changed

+91
-85
lines changed

‎.eslintrc

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"extends": "airbnb",
3+
"parser": "babel-eslint",
34
"rules": {
45
"comma-dangle": 0,
5-
"eqeqeq": [2, "allow-null"],
6-
"id-length": 0
6+
"eqeqeq": [2, "allow-null"]
77
}
88
}

‎README.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Integration between [React Router](https://github.com/rackt/react-router) and [R
99
Wrap your React-Bootstrap element in a `LinkContainer` to make it behave like a React Router `Link`:
1010

1111
```js
12-
<LinkContainer to="/foo" query={{bar: "baz"}}>
12+
<LinkContainer to={{ pathname: '/foo', query: { bar: 'baz' } }}>
1313
<Button>Foo</Button>
1414
</LinkContainer>
1515
```
@@ -20,14 +20,16 @@ As with React Router's `Link`, returning `false` from an `onClick` handler on `L
2020

2121
## Installation
2222

23+
**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.
24+
2325
```
2426
npm install react-router-bootstrap
2527
```
2628

2729
You will also want to have React Router and React-Bootstrap.
2830

2931
```
30-
npm install react-router@latest react-bootstrap
32+
npm install react-router react-bootstrap
3133
```
3234

3335
## Contributing

‎package.json

+36-36
Original file line numberDiff line numberDiff line change
@@ -32,53 +32,53 @@
3232
},
3333
"homepage": "https://github.com/react-bootstrap/react-router-bootstrap",
3434
"peerDependencies": {
35-
"react": ">=0.13.0",
36-
"react-router": ">=1.0.0-rc3"
35+
"react": ">=0.14.0",
36+
"react-router": ">=2.0.0-rc2"
3737
},
3838
"devDependencies": {
39-
"babel": "^5.8.23",
40-
"babel-core": "^5.8.25",
41-
"babel-eslint": "^4.1.3",
42-
"babel-loader": "^5.3.2",
43-
"bootstrap": "^3.3.5",
39+
"babel": "5.x",
40+
"babel-core": "5.x",
41+
"babel-eslint": "^4.1.6",
42+
"babel-loader": "5.x",
43+
"bootstrap": "^3.3.6",
4444
"colors": "^1.1.2",
45-
"css-loader": "^0.19.0",
46-
"es5-shim": "^4.1.14",
47-
"eslint": "^1.7.1",
48-
"eslint-config-airbnb": "^0.1.0",
49-
"eslint-plugin-babel": "^2.1.1",
50-
"eslint-plugin-mocha": "^1.0.0",
51-
"eslint-plugin-react": "^3.5.1",
52-
"file-loader": "^0.8.4",
53-
"history": "^1.12.5",
54-
"html-webpack-plugin": "^1.6.2",
55-
"karma": "^0.13.11",
56-
"karma-cli": "^0.1.1",
57-
"karma-mocha": "^0.2.0",
58-
"karma-mocha-reporter": "^1.1.1",
59-
"karma-phantomjs-launcher": "^0.2.1",
45+
"css-loader": "^0.23.1",
46+
"es5-shim": "^4.4.1",
47+
"eslint": "^1.10.3",
48+
"eslint-config-airbnb": "^2.1.1",
49+
"eslint-plugin-babel": "^3.0.0",
50+
"eslint-plugin-mocha": "^1.1.0",
51+
"eslint-plugin-react": "^3.13.1",
52+
"file-loader": "^0.8.5",
53+
"history": "^1.17.0",
54+
"html-webpack-plugin": "^1.7.0",
55+
"karma": "^0.13.16",
56+
"karma-cli": "^0.1.2",
57+
"karma-mocha": "^0.2.1",
58+
"karma-mocha-reporter": "^1.1.5",
59+
"karma-phantomjs-launcher": "^0.2.2",
6060
"karma-sinon-chai": "^1.1.0",
6161
"karma-sourcemap-loader": "^0.3.6",
6262
"karma-webpack": "^1.7.0",
6363
"less": "^2.5.3",
64-
"less-loader": "^2.2.1",
64+
"less-loader": "^2.2.2",
6565
"lodash": "^3.10.1",
66-
"mocha": "^2.3.3",
66+
"mocha": "^2.3.4",
6767
"mt-changelog": "^0.6.2",
6868
"node-libs-browser": "^0.5.3",
69-
"phantomjs": "^1.9.18",
70-
"react": "^0.14.0",
71-
"react-bootstrap": "^0.27.2",
72-
"react-dom": "^0.14.0",
73-
"react-router": "^1.0.0-rc3",
74-
"release-script": "^0.5.4",
75-
"rimraf": "^2.4.3",
69+
"phantomjs": "^1.9.19",
70+
"react": "^0.14.5",
71+
"react-bootstrap": "^0.28.1",
72+
"react-dom": "^0.14.5",
73+
"react-router": "^2.0.0-rc4",
74+
"release-script": "^0.5.6",
75+
"rimraf": "^2.5.0",
7676
"shelljs": "^0.5.3",
77-
"style-loader": "^0.12.4",
78-
"url-loader": "^0.5.6",
79-
"webpack": "^1.12.2",
80-
"webpack-dev-server": "^1.12.0",
81-
"yargs": "^3.27.0"
77+
"style-loader": "^0.13.0",
78+
"url-loader": "^0.5.7",
79+
"webpack": "^1.12.9",
80+
"webpack-dev-server": "^1.14.0",
81+
"yargs": "^3.31.0"
8282
},
8383
"files": [
8484
"README",

‎src/LinkContainer.js

+12-20
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// This is largely taken from react-router/lib/Link.
22

33
import React from 'react';
4-
import {Link} from 'react-router';
4+
import { Link } from 'react-router';
55

66
export default class LinkContainer extends React.Component {
77
constructor(props, context) {
@@ -24,23 +24,15 @@ export default class LinkContainer extends React.Component {
2424
}
2525

2626
render() {
27-
const {history} = this.context;
28-
const {onlyActiveOnIndex, to, query, hash, children, ...props} =
29-
this.props;
30-
31-
delete props.state;
27+
const { router } = this.context;
28+
const { onlyActiveOnIndex, to, children, ...props } = this.props;
3229

3330
props.onClick = this.onClick;
3431

35-
// Ignore if rendered outside the context of history, simplifies unit testing.
36-
if (history) {
37-
props.href = history.createHref(to, query);
38-
39-
if (hash) {
40-
props.href += hash;
41-
}
42-
43-
props.active = history.isActive(to, query, onlyActiveOnIndex);
32+
// Ignore if rendered outside Router context; simplifies unit testing.
33+
if (router) {
34+
props.href = router.createHref(to);
35+
props.active = router.isActive(to, onlyActiveOnIndex);
4436
}
4537

4638
return React.cloneElement(React.Children.only(children), props);
@@ -49,17 +41,17 @@ export default class LinkContainer extends React.Component {
4941

5042
LinkContainer.propTypes = {
5143
onlyActiveOnIndex: React.PropTypes.bool.isRequired,
52-
to: React.PropTypes.string.isRequired,
53-
query: React.PropTypes.object,
54-
hash: React.PropTypes.string,
55-
state: React.PropTypes.object,
44+
to: React.PropTypes.oneOfType([
45+
React.PropTypes.string,
46+
React.PropTypes.object,
47+
]).isRequired,
5648
onClick: React.PropTypes.func,
5749
disabled: React.PropTypes.bool.isRequired,
5850
children: React.PropTypes.node.isRequired
5951
};
6052

6153
LinkContainer.contextTypes = {
62-
history: React.PropTypes.object
54+
router: React.PropTypes.object
6355
};
6456

6557
LinkContainer.defaultProps = {

‎tests/IndexLinkContainer.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react';
33
import ReactTestUtils from 'react/lib/ReactTestUtils';
44
import * as ReactBootstrap from 'react-bootstrap';
55
import ReactDOM from 'react-dom';
6-
import {IndexRoute, Route, Router} from 'react-router';
6+
import { IndexRoute, Route, Router } from 'react-router';
77

88
import IndexLinkContainer from '../src/IndexLinkContainer';
99

‎tests/LinkContainer.spec.js

+18-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import createMemoryHistory from 'history/lib/createMemoryHistory';
21
import React from 'react';
32
import ReactTestUtils from 'react/lib/ReactTestUtils';
43
import * as ReactBootstrap from 'react-bootstrap';
54
import ReactDOM from 'react-dom';
6-
import {Route, Router} from 'react-router';
5+
import { Route, Router } from 'react-router';
6+
import createMemoryHistory from 'react-router/lib/createMemoryHistory';
77

88
import LinkContainer from '../src/LinkContainer';
99

@@ -23,7 +23,13 @@ describe('LinkContainer', () => {
2323
<Route
2424
path="/"
2525
component={() => (
26-
<LinkContainer to="/foo" query={{bar: 'baz'}} hash="#the-hash">
26+
<LinkContainer
27+
to={{
28+
pathname: '/foo',
29+
query: { bar: 'baz' },
30+
hash: '#the-hash'
31+
}}
32+
>
2733
<Component>Foo</Component>
2834
</LinkContainer>
2935
)}
@@ -43,7 +49,12 @@ describe('LinkContainer', () => {
4349
<Route
4450
path="/"
4551
component={() => (
46-
<LinkContainer to="/foo" query={{bar: 'baz'}}>
52+
<LinkContainer
53+
to={{
54+
pathname: '/foo',
55+
query: { bar: 'baz' }
56+
}}
57+
>
4758
<Component>Foo</Component>
4859
</LinkContainer>
4960
)}
@@ -84,7 +95,7 @@ describe('LinkContainer', () => {
8495
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(
8596
router, 'A'
8697
);
87-
ReactTestUtils.Simulate.click(anchor, {button: 0});
98+
ReactTestUtils.Simulate.click(anchor, { button: 0 });
8899

89100
const target = ReactTestUtils.findRenderedDOMComponentWithClass(
90101
router, 'target'
@@ -116,7 +127,7 @@ describe('LinkContainer', () => {
116127
const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(
117128
router, 'A'
118129
);
119-
ReactTestUtils.Simulate.click(anchor, {button: 0});
130+
ReactTestUtils.Simulate.click(anchor, { button: 0 });
120131

121132
expect(onClick).to.have.been.calledOnce;
122133
expect(childOnClick).to.have.been.calledOnce;
@@ -183,7 +194,7 @@ describe('LinkContainer', () => {
183194
router, Component
184195
);
185196
ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(component),
186-
{button: 0}
197+
{ button: 0 }
187198
);
188199

189200
const target = ReactTestUtils.scryRenderedDOMComponentsWithClass(

‎tests/visual/ButtonVisual.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
33
import Button from 'react-bootstrap/lib/Button';
4-
import {Link} from 'react-router';
4+
import { Link } from 'react-router';
55

66
import LinkContainer from '../../src/LinkContainer';
77

‎tests/visual/Home.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import {Link} from 'react-router';
2+
import { Link } from 'react-router';
33

44
export default () => (
55
<div>

‎tests/visual/ListGroupItemVisual.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import ListGroup from 'react-bootstrap/lib/ListGroup';
33
import ListGroupItem from 'react-bootstrap/lib/ListGroupItem';
4-
import {Link} from 'react-router';
4+
import { Link } from 'react-router';
55

66
import LinkContainer from '../../src/LinkContainer';
77

‎tests/visual/MenuItemVisual.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
33
import MenuItem from 'react-bootstrap/lib/MenuItem';
44
import SplitButton from 'react-bootstrap/lib/SplitButton';
5-
import {Link} from 'react-router';
5+
import { Link } from 'react-router';
66

77
import LinkContainer from '../../src/LinkContainer';
88

‎tests/visual/NavItemVisual.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import Nav from 'react-bootstrap/lib/Nav';
33
import NavItem from 'react-bootstrap/lib/NavItem';
4-
import {Link} from 'react-router';
4+
import { Link } from 'react-router';
55

66
import LinkContainer from '../../src/LinkContainer';
77

‎tests/visual/index.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
22
import Grid from 'react-bootstrap/lib/Grid';
33
import ReactDOM from 'react-dom';
4-
import {IndexRoute, Route, Router} from 'react-router';
4+
import { IndexRedirect, Route, Router } from 'react-router';
5+
import hashHistory from 'react-router/lib/hashHistory';
56

67
import ButtonVisual from './ButtonVisual';
78
import Home from './Home';
@@ -11,7 +12,7 @@ import NavItemVisual from './NavItemVisual';
1112

1213
import 'bootstrap/less/bootstrap.less';
1314

14-
const App = ({children}) => (
15+
const App = ({ children }) => (
1516
<Grid>
1617
<h1>React-Router-Bootstrap Module Visual Test</h1>
1718
{children}
@@ -22,9 +23,9 @@ const mountNode = document.createElement('div');
2223
document.body.appendChild(mountNode);
2324

2425
ReactDOM.render(
25-
<Router>
26+
<Router history={hashHistory}>
2627
<Route path="/" component={App}>
27-
<IndexRoute onEnter={(_, replaceWith) => replaceWith(null, '/home')} />
28+
<IndexRedirect to="/home" />
2829
<Route path="home" component={Home} />
2930

3031
<Route path="button" component={ButtonVisual} />

‎webpack.config.babel.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import webpack from 'webpack';
22
import yargs from 'yargs';
33

4-
const {optimizeMinimize} = yargs.alias('p', 'optimize-minimize').argv;
4+
const { optimizeMinimize } = yargs.alias('p', 'optimize-minimize').argv;
55
const nodeEnv = optimizeMinimize ? 'production' : 'development';
66

77
export default {
@@ -16,7 +16,7 @@ export default {
1616
},
1717
module: {
1818
loaders: [
19-
{test: /\.js$/, loader: 'babel', exclude: /node_modules/}
19+
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
2020
]
2121
},
2222
externals: [
@@ -39,7 +39,7 @@ export default {
3939
],
4040
plugins: [
4141
new webpack.DefinePlugin({
42-
'process.env': {'NODE_ENV': JSON.stringify(nodeEnv)}
42+
'process.env': { 'NODE_ENV': JSON.stringify(nodeEnv) }
4343
})
4444
],
4545
devtool: optimizeMinimize ? 'source-map' : null

‎webpack.test.config.babel.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default {
44
},
55
module: {
66
loaders: [
7-
{test: /\.js/, loader: 'babel', exclude: /node_modules/}
7+
{ test: /\.js/, loader: 'babel', exclude: /node_modules/ }
88
]
99
},
1010
devtool: 'inline-source-map'

‎webpack.visual.config.babel.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ export default {
44
entry: './tests/visual',
55
module: {
66
loaders: [
7-
{test: /\.js/, loader: 'babel', exclude: /node_modules/},
8-
{test: /\.less$/, loader: 'style!css!less'},
9-
{test: /\.woff|\.woff2$/, loader: 'url?prefix=font/&limit=5000'},
10-
{test: /\.eot$|\.ttf$|\.svg$/, loader: 'file?prefix=font/'}
7+
{ test: /\.js/, loader: 'babel', exclude: /node_modules/ },
8+
{ test: /\.less$/, loader: 'style!css!less' },
9+
{ test: /\.woff|\.woff2$/, loader: 'url?prefix=font/&limit=5000' },
10+
{ test: /\.eot$|\.ttf$|\.svg$/, loader: 'file?prefix=font/' }
1111
]
1212
},
1313
plugins: [

0 commit comments

Comments
 (0)