Skip to content

/react-router-bootstrap

Browse files

[changed] Support React Router v2.x

  • Loading branch information...
1 parent faf6558 commit 483a863ea3d0187ff6278f41fb9e21c3b3968abc @taion taion committed
View
4 .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"]
}
}
View
6 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,6 +20,8 @@ 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
```
@@ -27,7 +29,7 @@ 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
View
72 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",
View
32 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 = {
View
2 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';
View
25 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(
View
2 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';
View
2 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>
View
2 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';
View
2 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';
View
2 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';
View
9 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} />
View
6 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
View
2 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'
View
8 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: [

0 comments on commit 483a863

Please sign in to comment.
Something went wrong with that request. Please try again.