Skip to content

Commit 10d78bb

Browse files
StringEpsilontimdorr
authored andcommittedApr 3, 2019
withRouter: Directly use RouterContext instead of Route. (#6685)
This reduces the nesting introduced by withRouter() quite a bit and makes for an easier warning in case it's used outside <Router/>
1 parent 017f692 commit 10d78bb

File tree

3 files changed

+36
-29
lines changed

3 files changed

+36
-29
lines changed
 

‎packages/react-router-dom/.size-snapshot.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@
1414
}
1515
},
1616
"umd/react-router-dom.js": {
17-
"bundled": 162079,
18-
"minified": 57806,
19-
"gzipped": 16662
17+
"bundled": 162277,
18+
"minified": 57870,
19+
"gzipped": 16689
2020
},
2121
"umd/react-router-dom.min.js": {
22-
"bundled": 97956,
23-
"minified": 34459,
24-
"gzipped": 10224
22+
"bundled": 98089,
23+
"minified": 34473,
24+
"gzipped": 10230
2525
}
2626
}
+11-11
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
{
22
"esm/react-router.js": {
3-
"bundled": 23136,
4-
"minified": 13099,
5-
"gzipped": 3654,
3+
"bundled": 23391,
4+
"minified": 13245,
5+
"gzipped": 3676,
66
"treeshaked": {
77
"rollup": {
8-
"code": 2267,
8+
"code": 2209,
99
"import_statements": 465
1010
},
1111
"webpack": {
12-
"code": 3630
12+
"code": 3572
1313
}
1414
}
1515
},
1616
"umd/react-router.js": {
17-
"bundled": 102232,
18-
"minified": 36232,
19-
"gzipped": 11519
17+
"bundled": 102432,
18+
"minified": 36295,
19+
"gzipped": 11538
2020
},
2121
"umd/react-router.min.js": {
22-
"bundled": 63839,
23-
"minified": 22264,
24-
"gzipped": 7893
22+
"bundled": 63974,
23+
"minified": 22277,
24+
"gzipped": 7899
2525
}
2626
}

‎packages/react-router/modules/withRouter.js

+19-12
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,37 @@
11
import React from "react";
22
import PropTypes from "prop-types";
3+
import RouterContext from "./RouterContext";
34
import hoistStatics from "hoist-non-react-statics";
4-
5-
import Route from "./Route";
5+
import invariant from "tiny-invariant";
66

77
/**
88
* A public higher-order component to access the imperative API
99
*/
1010
function withRouter(Component) {
11+
const displayName = `withRouter(${Component.displayName || Component.name})`;
1112
const C = props => {
1213
const { wrappedComponentRef, ...remainingProps } = props;
1314

1415
return (
15-
<Route
16-
children={routeComponentProps => (
17-
<Component
18-
{...remainingProps}
19-
{...routeComponentProps}
20-
ref={wrappedComponentRef}
21-
/>
22-
)}
23-
/>
16+
<RouterContext.Consumer>
17+
{context => {
18+
invariant(
19+
context,
20+
`You should not use <${displayName} /> outside a <Router>`
21+
);
22+
return (
23+
<Component
24+
{...remainingProps}
25+
{...context}
26+
ref={wrappedComponentRef}
27+
/>
28+
);
29+
}}
30+
</RouterContext.Consumer>
2431
);
2532
};
2633

27-
C.displayName = `withRouter(${Component.displayName || Component.name})`;
34+
C.displayName = displayName;
2835
C.WrappedComponent = Component;
2936

3037
if (__DEV__) {

0 commit comments

Comments
 (0)
Please sign in to comment.