Skip to content

Commit bd436ce

Browse files
timdorrtimdorr
committedMay 29, 2019
Merge branch 'website'
·
v6.4.0-pre.2create-react-router@6.26.2
2 parents a38ef04 + 97f0eee commit bd436ce

17 files changed

+195
-661
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/base.css

+37
Original file line numberDiff line numberDiff line change
@@ -258,3 +258,40 @@ h3 {
258258
opacity: 1;
259259
transition: opacity 250ms ease-in;
260260
}
261+
262+
/* Just some temporary CSS for our hooks tour ad */
263+
264+
.hooks-tour {
265+
padding: 1.5em;
266+
background-image: url(https://reacttraining.com/images/blue-fade.svg),
267+
url(https://reacttraining.com/images/blue-fade.svg);
268+
background-position: 50% 0, 0 -20%;
269+
background-size: 100%;
270+
background-repeat: no-repeat;
271+
background-color: #edf4f7;
272+
border: 1px solid #d3dbde;
273+
text-align: center;
274+
border-radius: 0.5em;
275+
}
276+
277+
.hooks-tour .logo {
278+
width: 60%;
279+
}
280+
281+
.hooks-tour a {
282+
display: inline-block;
283+
margin: 0.2em 0;
284+
padding: 0.2em 0.5em;
285+
background-color: #e94948;
286+
color: #fff;
287+
border-radius: 0.2em;
288+
}
289+
290+
.hooks-tour hr {
291+
border: none;
292+
border-bottom: 1px solid #d3dbde;
293+
}
294+
295+
.hooks-tour p:last-of-type {
296+
font-size: 0.7em;
297+
}

‎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/EnvironmentHeader.js

+20-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import React from "react";
22
import { Link, Route } from "react-router-dom";
33
import { Block, Row, Inline, Col } from "jsxstyle";
44
import PropTypes from "prop-types";
5+
import Media from "react-media";
56

6-
import { LIGHT_GRAY, RED } from "../Theme";
7+
import { LIGHT_GRAY, RED, SMALL_SCREEN } from "../Theme";
78
import Logo from "./Logo";
89

910
function Tab({ to, ...rest }) {
@@ -82,6 +83,24 @@ function Branding() {
8283
function EnvironmentHeader() {
8384
return (
8485
<Block>
86+
<Media query={SMALL_SCREEN}>
87+
<Block
88+
padding="1px"
89+
backgroundColor={RED}
90+
textAlign="center"
91+
color="#fff"
92+
>
93+
<p>
94+
<a
95+
href="https://reacttraining.com"
96+
style={{ textDecoration: "underline" }}
97+
>
98+
Attend a React Workshop
99+
</a>{" "}
100+
in a city near you this Spring!
101+
</p>
102+
</Block>
103+
</Media>
85104
<Branding />
86105
<Tabs />
87106
</Block>

‎website/modules/components/EnvironmentLarge.js

+28-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";
@@ -8,38 +8,34 @@ import EnvironmentHeader from "./EnvironmentHeader";
88
import Example from "./Example";
99
import Guide from "./Guide";
1010
import API from "./API";
11+
import HooksTourAd from "./HooksTourAd";
12+
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+
);
1125

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

34+
EnvironmentLarge.propTypes = {
35+
data: PropTypes.object,
36+
match: PropTypes.object
37+
};
38+
4339
function Title(props) {
4440
return (
4541
<Block
@@ -98,6 +94,8 @@ NavLink.propTypes = {
9894
function NavLinks({ data, environment }) {
9995
return (
10096
<Block lineHeight="1.8" padding="10px">
97+
<HooksTourAd />
98+
10199
{Array.isArray(data.examples) &&
102100
data.examples.length > 0 && (
103101
<Block>

‎website/modules/components/FakeBrowser.js

-177
This file was deleted.

‎website/modules/components/HooksTourAd.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from "react";
2+
3+
function HooksTourAdd() {
4+
return (
5+
<div className="hooks-tour">
6+
<img
7+
className="logo"
8+
src="https://reacttraining.com/images/react-training-logo.svg"
9+
alt="React Training Logo"
10+
/>
11+
<p>Attend a React Workshop in a city near you this Spring!</p>
12+
<a href="https://reacttraining.com/workshops/">View Schedule</a>
13+
<hr />
14+
<p>By the creators of React Router</p>
15+
</div>
16+
);
17+
}
18+
19+
export default HooksTourAdd;

‎website/modules/components/NativeExample.js

-66
This file was deleted.

‎website/modules/components/WebExample.js

-64
This file was deleted.

‎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

+19-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
@@ -51,7 +51,18 @@
5151
"markdown-it": "^7.0.0",
5252
"postcss-loader": "^2.1.5",
5353
"prismjs": "^1.8.4",
54+
"prop-types": "^15.6.1",
55+
"query-string": "^5.1.0",
5456
"raw-loader": "^0.5.1",
57+
"react": "^16.8.4",
58+
"react-css-property-operations": "^15.4.1",
59+
"react-dom": "^16.8.4",
60+
"react-icons": "^2.2.7",
61+
"react-media": "^1.6.1",
62+
"react-motion": "^0.5.2",
63+
"react-transition-group": "^2.2.1",
64+
"resolve-pathname": "^2.2.0",
65+
"slug": "^1.0.0",
5566
"style-loader": "^0.19.0",
5667
"sw-precache": "^4.2.2",
5768
"sw-precache-webpack-plugin": "^0.11.5",

0 commit comments

Comments
 (0)
Please sign in to comment.