Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 27b1e9c

Browse files
authored
Merge pull request #248 from kfitzgerald/context-fix
Use public API (withRouter) for React-Router instead of private contexts
2 parents 6ee8df4 + 73ee39a commit 27b1e9c

File tree

4 files changed

+28
-20
lines changed

4 files changed

+28
-20
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 defaultclass 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: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
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+
}).isRequired,
15+
location: PropTypes.object,
16+
match: PropTypes.object,
17+
staticContext: PropTypes.object,
2018
children: PropTypes.element.isRequired,
2119
onClick: PropTypes.func,
2220
replace: PropTypes.bool,
@@ -58,21 +56,24 @@ export default class LinkContainer extends Component {
5856
) {
5957
event.preventDefault();
6058

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

6461
if (replace) {
6562
history.replace(to);
6663
} else {
6764
history.push(to);
6865
}
6966
}
70-
}
67+
};
7168

7269
render() {
7370
const {
71+
history,
72+
location: _location, // eslint-disable-line no-unused-vars
73+
match: _match, // eslint-disable-line no-unused-vars
74+
staticContext: _staticContext, // eslint-disable-line no-unused-vars
7475
children,
75-
replace, // eslint-disable-line no-unused-vars
76+
replace, // eslint-disable-line no-unused-vars
7677
to,
7778
exact,
7879
strict,
@@ -84,7 +85,7 @@ export default class LinkContainer extends Component {
8485
...props,
8586
} = this.props;
8687

87-
const href = this.context.router.history.createHref(
88+
const href = history.createHref(
8889
typeof to === 'string' ? { pathname: to } : to
8990
);
9091

@@ -114,3 +115,5 @@ export default class LinkContainer extends Component {
114115
);
115116
}
116117
}
118+
119+
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,{LinkContainerasRawLinkContainer} 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)

AltStyle によって変換されたページ (->オリジナル) /