Skip to content

Commit 946203a

Browse files
committed
Fixed usage of private React Router context
* IndexLinkContainer: * Wrapped `withRouter` as default export, * Now exports original component separately * LinkContainer: * Wrapped `withRouter` as default export, * Now exports original component separately * `contextTypes` validation has been removed * `propTypes` now expects `history` object, as it is expected to be wrapped `withRouter` * `this.context.router.history` references replaced with `this.props.history` * Tests updated to deal with wrapped component vs real component references * git ignore updates
1 parent 6ee8df4 commit 946203a

File tree

4 files changed

+21
-19
lines changed

4 files changed

+21
-19
lines changed

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,5 @@ node_modules
55
amd
66
lib
77
tmp-bower-repo
8+
.idea
9+
package-lock.json

src/IndexLinkContainer.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import React from 'react';
2+
import { withRouter } from 'react-router-dom';
23

34
import LinkContainer from './LinkContainer';
45

56
// Don't use a stateless function, to allow users to set a ref.
67
/* eslint-disable react/prefer-stateless-function */
7-
export default class IndexLinkContainer extends React.Component {
8+
export class IndexLinkContainer extends React.Component {
89
render() {
910
return (
1011
<LinkContainer {...this.props} exact />
1112
);
1213
}
1314
}
1415
/* eslint-enable react/prefer-stateless-function */
16+
17+
export default withRouter(IndexLinkContainer);

src/LinkContainer.js

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,17 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
3-
import { Route } from 'react-router-dom';
3+
import { Route, withRouter } from 'react-router-dom';
44

55
const isModifiedEvent = (event) =>
66
!!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
77

8-
export default class LinkContainer extends Component {
9-
static contextTypes = {
10-
router: PropTypes.shape({
11-
history: PropTypes.shape({
12-
push: PropTypes.func.isRequired,
13-
replace: PropTypes.func.isRequired,
14-
createHref: PropTypes.func.isRequired,
15-
}).isRequired,
16-
}).isRequired,
17-
};
18-
8+
export class LinkContainer extends Component {
199
static propTypes = {
10+
history: PropTypes.shape({
11+
push: PropTypes.func.isRequired,
12+
replace: PropTypes.func.isRequired,
13+
createHref: PropTypes.func.isRequired,
14+
}),
2015
children: PropTypes.element.isRequired,
2116
onClick: PropTypes.func,
2217
replace: PropTypes.bool,
@@ -58,19 +53,19 @@ export default class LinkContainer extends Component {
5853
) {
5954
event.preventDefault();
6055

61-
const { history } = this.context.router;
62-
const { replace, to } = this.props;
56+
const { replace, to, history } = this.props;
6357

6458
if (replace) {
6559
history.replace(to);
6660
} else {
6761
history.push(to);
6862
}
6963
}
70-
}
64+
};
7165

7266
render() {
7367
const {
68+
history,
7469
children,
7570
replace, // eslint-disable-line no-unused-vars
7671
to,
@@ -84,7 +79,7 @@ export default class LinkContainer extends Component {
8479
...props,
8580
} = this.props;
8681

87-
const href = this.context.router.history.createHref(
82+
const href = history.createHref(
8883
typeof to === 'string' ? { pathname: to } : to
8984
);
9085

@@ -114,3 +109,5 @@ export default class LinkContainer extends Component {
114109
);
115110
}
116111
}
112+
113+
export default withRouter(LinkContainer);

test/LinkContainer.spec.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as ReactBootstrap from 'react-bootstrap';
44
import { findDOMNode } from 'react-dom';
55
import { Route, MemoryRouter as Router } from 'react-router-dom';
66

7-
import LinkContainer from '../src/LinkContainer';
7+
import LinkContainer, { LinkContainer as RawLinkContainer } from '../src/LinkContainer';
88

99
describe('LinkContainer', () => {
1010
[
@@ -62,7 +62,7 @@ describe('LinkContainer', () => {
6262
);
6363

6464
const container = ReactTestUtils.findRenderedComponentWithType(
65-
router, LinkContainer
65+
router, RawLinkContainer
6666
);
6767
const component = ReactTestUtils.findRenderedComponentWithType(
6868
router, Component

0 commit comments

Comments
 (0)