Skip to content

Commit 97f0eee

Browse files
bradwestfalltimdorr
bradwestfall
authored and
timdorr
committedMay 15, 2019
Removing "update blocking" content (#6652)
* update react and start using hooks in some places * remove content for blocked updates
·
v6.4.0-pre.2create-react-router@6.26.2
1 parent 65ca0ae commit 97f0eee

File tree

11 files changed

+110
-353
lines changed

11 files changed

+110
-353
lines changed
 

‎FAQ.md

-5
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,11 @@ This is a list of support questions that frequently show up in GitHub issues. Th
44

55
If there is a support question that you frequently see being asked, please open a PR to add it to this list.
66

7-
- [Why aren't my components updating when the location changes?](#why-arent-my-components-updating-when-the-location-changes)
87
- [Why doesn't my application render after refreshing?](#why-doesnt-my-application-render-after-refreshing)
98
- [Why doesn't my application work when loading nested routes?](#why-doesnt-my-application-work-when-loading-nested-routes)
109
- [How do I access the `history` object outside of components?](#how-do-i-access-the-history-object-outside-of-components)
1110
- [How do I pass props to the component rendered by a `<Route>`?](#how-do-i-pass-props-to-the-component-rendered-by-a-route)
1211

13-
### Why aren't my components updating when the location changes?
14-
15-
React Router relies on updates propagating from your router component to every child component. If you (or a component you use) implements `shouldComponentUpdate` or is a `React.PureComponent`, you may run into issues where your components do not update when the location changes. For a detailed review of the problem, please see the [blocked updates guide](packages/react-router/docs/guides/blocked-updates.md).
16-
1712
### Why doesn't my application render after refreshing?
1813

1914
If your application is hosted on a static file server, you need to use a `<HashRouter>` instead of a `<BrowserRouter>`.

‎packages/react-router/docs/api/withRouter.md

+1-21
Original file line numberDiff line numberDiff line change
@@ -29,27 +29,7 @@ const ShowTheLocationWithRouter = withRouter(ShowTheLocation);
2929

3030
#### Important Note
3131

32-
`withRouter` does not subscribe to location changes like React Redux's `connect` does for state changes. Instead, re-renders after location changes propagate out from the `<Router>` component. This means that `withRouter` does _not_ re-render on route transitions unless its parent component re-renders. If you are using `withRouter` to prevent updates from being blocked by `shouldComponentUpdate`, it is important that `withRouter` wraps the component that implements `shouldComponentUpdate`. For example, when using Redux:
33-
34-
```js
35-
// This gets around shouldComponentUpdate
36-
withRouter(connect(...)(MyComponent))
37-
// or
38-
compose(
39-
withRouter,
40-
connect(...)
41-
)(MyComponent)
42-
43-
// This does not
44-
connect(...)(withRouter(MyComponent))
45-
// nor
46-
compose(
47-
connect(...),
48-
withRouter
49-
)(MyComponent)
50-
```
51-
52-
See [this guide](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md) for more information.
32+
`withRouter` does not subscribe to location changes like React Redux's `connect` does for state changes. Instead, re-renders after location changes propagate out from the `<Router>` component. This means that `withRouter` does _not_ re-render on route transitions unless its parent component re-renders.
5333

5434
#### Static Methods and Properties
5535

‎packages/react-router/docs/guides/blocked-updates.md

-200
This file was deleted.

‎website/modules/components/Bundle.js

+12-26
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,18 @@
1-
import React, { Component } from "react";
1+
import { useState, useEffect } from "react";
22

3-
class Bundle extends Component {
4-
state = {
5-
mod: null
6-
};
3+
function Bundle({ children, load }) {
4+
const [mod, setMod] = useState();
75

8-
componentWillMount() {
9-
this.load(this.props);
10-
}
6+
useEffect(
7+
() => {
8+
load(mod => {
9+
setMod(mod.default ? mod.default : mod);
10+
});
11+
},
12+
[load]
13+
);
1114

12-
componentWillReceiveProps(nextProps) {
13-
if (nextProps.load !== this.props.load) {
14-
this.load(nextProps);
15-
}
16-
}
17-
18-
load(props) {
19-
this.setState({
20-
mod: null
21-
});
22-
props.load(mod => {
23-
this.setState({ mod: mod.default ? mod.default : mod });
24-
});
25-
}
26-
27-
render() {
28-
return this.props.children(this.state.mod);
29-
}
15+
return children(mod);
3016
}
3117

3218
export default Bundle;

‎website/modules/components/Environment.js

+45-53
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import React, { Component } from "react";
1+
import React, { useEffect } from "react";
22
import { Redirect } from "react-router-dom";
3-
import { Block } from "jsxstyle";
43
import PropTypes from "prop-types";
54

65
import EnvironmentLarge from "./EnvironmentLarge";
@@ -15,63 +14,56 @@ const envData = {
1514
core: require("bundle-loader?lazy!../docs/Core")
1615
};
1716

18-
class Environment extends Component {
19-
static propTypes = {
20-
location: PropTypes.object,
21-
history: PropTypes.object,
22-
match: PropTypes.shape({
23-
params: PropTypes.shape({
24-
environment: PropTypes.string
25-
})
26-
})
27-
};
28-
29-
componentDidMount() {
30-
this.preload();
17+
function Environment({
18+
history,
19+
location,
20+
match,
21+
match: {
22+
params: { environment }
3123
}
32-
33-
preload() {
24+
}) {
25+
useEffect(() => {
3426
Object.keys(envData).forEach(key => envData[key](() => {}));
35-
}
27+
}, []);
3628

37-
render() {
38-
const {
39-
history,
40-
location,
41-
match,
42-
match: {
43-
params: { environment }
44-
}
45-
} = this.props;
46-
if (!envData[environment]) {
47-
return <Redirect to="/" />;
48-
} else {
49-
return (
50-
<SmallScreen>
51-
{isSmallScreen => (
52-
<Bundle name="Environment" load={envData[environment]}>
53-
{data =>
54-
data ? (
55-
isSmallScreen ? (
56-
<EnvironmentSmall
57-
data={data}
58-
match={match}
59-
location={location}
60-
history={history}
61-
/>
62-
) : (
63-
<EnvironmentLarge data={data} match={match} />
64-
)
29+
if (!envData[environment]) {
30+
return <Redirect to="/" />;
31+
} else {
32+
return (
33+
<SmallScreen>
34+
{isSmallScreen => (
35+
<Bundle load={envData[environment]}>
36+
{data =>
37+
data ? (
38+
isSmallScreen ? (
39+
<EnvironmentSmall
40+
data={data}
41+
match={match}
42+
location={location}
43+
history={history}
44+
/>
6545
) : (
66-
<Loading />
46+
<EnvironmentLarge data={data} match={match} />
6747
)
68-
}
69-
</Bundle>
70-
)}
71-
</SmallScreen>
72-
);
73-
}
48+
) : (
49+
<Loading />
50+
)
51+
}
52+
</Bundle>
53+
)}
54+
</SmallScreen>
55+
);
7456
}
7557
}
7658

59+
Environment.propTypes = {
60+
location: PropTypes.object,
61+
history: PropTypes.object,
62+
match: PropTypes.shape({
63+
params: PropTypes.shape({
64+
environment: PropTypes.string
65+
})
66+
})
67+
};
68+
7769
export default Environment;

‎website/modules/components/EnvironmentLarge.js

+25-30
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Component } from "react";
1+
import React, { Fragment, useEffect } from "react";
22
import PropTypes from "prop-types";
33
import { Block, InlineBlock } from "jsxstyle";
44
import { Link, Route, Redirect, Switch } from "react-router-dom";
@@ -10,37 +10,32 @@ import Guide from "./Guide";
1010
import API from "./API";
1111
import HooksTourAd from "./HooksTourAd";
1212

13-
class EnvironmentLarge extends Component {
14-
static propTypes = {
15-
data: PropTypes.object,
16-
match: PropTypes.object
17-
};
18-
19-
componentDidMount() {
20-
this.preloadExamples();
21-
}
22-
23-
preloadExamples() {
24-
const { data } = this.props;
25-
data.examples.forEach(example => {
26-
// native doesn't have `load`
27-
if (example.load) example.load(() => {});
28-
// all have `loadSource`
29-
if (example.loadSource) example.loadSource(() => {});
30-
});
31-
}
32-
33-
render() {
34-
const { data, match } = this.props;
35-
return (
36-
<Block>
37-
<Nav data={data} environment={match.params.environment} />
38-
<Content data={data} match={match} />
39-
</Block>
40-
);
41-
}
13+
function EnvironmentLarge({ data, match }) {
14+
useEffect(
15+
() => {
16+
data.examples.forEach(example => {
17+
// native doesn't have `load`
18+
if (example.load) example.load(() => {});
19+
// all have `loadSource`
20+
if (example.loadSource) example.loadSource(() => {});
21+
});
22+
},
23+
[data]
24+
);
25+
26+
return (
27+
<Fragment>
28+
<Nav data={data} environment={match.params.environment} />
29+
<Content data={data} match={match} />
30+
</Fragment>
31+
);
4232
}
4333

34+
EnvironmentLarge.propTypes = {
35+
data: PropTypes.object,
36+
match: PropTypes.object
37+
};
38+
4439
function Title(props) {
4540
return (
4641
<Block

‎website/modules/docs/Core.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ export default {
2020
require("../../../packages/react-router/docs/guides/quick-start.md"),
2121
require("../../../packages/react-router/docs/guides/testing.md"),
2222
require("../../../packages/react-router/docs/guides/redux.md"),
23-
require("../../../packages/react-router/docs/guides/static-routes.md"),
24-
require("../../../packages/react-router/docs/guides/blocked-updates.md")
23+
require("../../../packages/react-router/docs/guides/static-routes.md")
2524
]
2625
};

‎website/modules/docs/Native.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,6 @@ export default {
8383
require("../../../packages/react-router-native/docs/guides/deep-linking.md"),
8484
require("../../../packages/react-router-native/docs/guides/animation.md"),
8585
require("../../../packages/react-router/docs/guides/philosophy.md"),
86-
require("../../../packages/react-router/docs/guides/redux.md"),
87-
require("../../../packages/react-router/docs/guides/blocked-updates.md")
86+
require("../../../packages/react-router/docs/guides/redux.md")
8887
]
8988
};

‎website/modules/docs/Web.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@ export default {
2727
require("../../../packages/react-router/docs/guides/philosophy.md"),
2828
require("../../../packages/react-router/docs/guides/testing.md?web"),
2929
require("../../../packages/react-router/docs/guides/redux.md"),
30-
require("../../../packages/react-router/docs/guides/static-routes.md"),
31-
require("../../../packages/react-router/docs/guides/blocked-updates.md")
30+
require("../../../packages/react-router/docs/guides/static-routes.md")
3231
],
3332

3433
examples: [

‎website/package-lock.json

+13-12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/package.json

+11
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,18 @@
4949
"markdown-it": "^7.0.0",
5050
"postcss-loader": "^2.1.5",
5151
"prismjs": "^1.8.4",
52+
"prop-types": "^15.6.1",
53+
"query-string": "^5.1.0",
5254
"raw-loader": "^0.5.1",
55+
"react": "^16.8.4",
56+
"react-css-property-operations": "^15.4.1",
57+
"react-dom": "^16.8.4",
58+
"react-icons": "^2.2.7",
59+
"react-media": "^1.6.1",
60+
"react-motion": "^0.5.2",
61+
"react-transition-group": "^2.2.1",
62+
"resolve-pathname": "^2.2.0",
63+
"slug": "^1.0.0",
5364
"style-loader": "^0.19.0",
5465
"sw-precache": "^4.2.2",
5566
"sw-precache-webpack-plugin": "^0.11.5",

0 commit comments

Comments
 (0)
Please sign in to comment.