You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-**Feature:** Add `applyRouterMiddleware` for extending router rendering ([#3327])
5
20
-**Feature/Deprecation:** Add `routerShape` and `locationShape` as top-level exported prop types, and deprecate all the old prop types, including the ones that were previously incorrectly removed ([#3349])
6
-
-**Minor:** Move ES module build back to `es6/` to avoid breaking people who were incorrectly importing from `react-router/es6` ([#3334])
21
+
-**Minor:** Move ES module build back to `es6/` to avoid breaking people who were importing from `react-router/es6` ([#3334])
React Router is a complete routing library for [React](https://facebook.github.io/react).
4
6
5
7
React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.
@@ -20,7 +22,7 @@ React Router keeps your UI in sync with the URL. It has a simple API with powerf
For questions and support, please visit [our channel on Reactiflux](https://discord.gg/0ZcbPKXt5bYaNQ46) or [Stack Overflow](http://stackoverflow.com/questions/tagged/react-router).
Route matching happens in the order they are defined (think `if/elseif` statement). In this case, `/about/me` will show the `<UserPage>` component because `/about/me` matches the first route. You need to reorder your routes if this happens. `<About>` will never be reachable:
37
+
Route matching happens in the order they are defined (think `if/else if` statement). In this case, `/about/me` will show the `<UserPage>` component because `/about/me` matches the first route. You need to reorder your routes if this happens. `<About>` will never be reachable:
37
38
38
39
```js
39
40
<Router>
@@ -52,22 +53,83 @@ Route matching happens in the order they are defined (think `if/elseif` statemen
Then the path `/widgets` will not be considered active when the current path is something like `/widgets/3`. This is because React Router looks at parent _routes_ rather than parent _paths_ to determine active state. To make the path `/widgets` active when the current path is `/widgets/3`, you need to declare your routes as:
68
+
69
+
```js
70
+
<Route path="/">
71
+
<Route path="widgets">
72
+
<IndexRoute component={WidgetList} />
73
+
<Route path=":widgetId" component={Widget} />
74
+
</Route>
75
+
</Route>
76
+
```
77
+
78
+
As an additional benefit, this also removes the duplication in declaring route paths.
79
+
80
+
55
81
### "Required prop was not specified" on route components
56
82
57
83
You might see this if you are using `React.cloneElement` to inject props into route components from their parents. If you see this, remove `isRequired` from `propTypes` for those props. This happens because React validates `propTypes` when the element is created rather than when it is mounted. For more details, see [facebook/react#4494](https://github.com/facebook/react/issues/4494#issuecomment-125068868).
58
84
59
85
You should generally attempt to use this pattern as sparingly as possible. In general, it's best practice to minimize data dependencies between route components.
60
86
61
87
62
-
### `<noscript>` with server-side rendering and async routes
88
+
### Passing additional values into route components
63
89
64
-
Use `match({ history, routes })` on the client side. See [the server rendering guide](guides/ServerRendering.md#async-routes).
90
+
There are multiple ways to do this depending on what you want specifically.
65
91
92
+
#### Declare properties on the route
66
93
67
-
### Passing additional values into route components
94
+
You can define additional props on `<Route>` or on the plain route:
68
95
69
-
There are multiple ways to do this depending on what you want to do. You can:
96
+
```js
97
+
<Route foo="bar"/>
98
+
```
70
99
71
-
- Define additional values on `<Route>` or the plain route. This will make those values available on `this.props.route` on route components.
72
-
- Pass in a `createElement` handler to `<Router>` or `<RouterContext>`. This will allow you to inject additional props into route elements at creation time.
73
-
- Define a top-level component above `<Router>` or `<RouterContext>` that exports additional values via `getChildContext`, then access them via context from rendered components.
100
+
These properties will then be available on `this.props.route` on the route component, such as with `this.props.route.foo` above.
101
+
102
+
#### Inject props to all routes via middleware
103
+
104
+
You can define a middleware that injects additional props into each route component:
Copy file name to clipboardExpand all lines: docs/guides/ConfirmingNavigation.md
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -22,3 +22,5 @@ const Home = withRouter(
22
22
})
23
23
)
24
24
```
25
+
26
+
Note that this example makes use of the [withRouter](https://github.com/reactjs/react-router/blob/v2.4.0/upgrade-guides/v2.4.0.md) higher-order component introduced in v2.4.0.
For convenience, React Router exposes its full API on the top-level `react-router` import. However, this causes the entire React Router library and its dependencies to be included in client bundles that include code that makes any imports from the top-level CommonJS bundle.
3
+
For convenience, React Router exposes its full API on the top-level `react-router` import. However, this causes the entire React Router library and its dependencies to be included in client bundles that include code that imports from the top-level CommonJS bundle.
4
4
5
-
There are two options for minimizing client bundle size by excluding unused modules.
5
+
Instead, the bindings exported from `react-router`are also available in `react-router/lib`. When using CommonJS modules, you can import directly from `react-router/lib` to avoid pulling in unused modules.
6
6
7
-
8
-
## Import from `react-router/lib`
9
-
10
-
Bindings exported from `react-router` are also available in `react-router/lib`. When using CommonJS models, you can import directly from `react-router/lib` to avoid pulling in unused modules.
11
-
12
-
Assuming you are transpiling ES2015 modules into CommonJS modules, instead of
7
+
Assuming you are transpiling ES2015 modules into CommonJS modules, instead of:
13
8
14
9
```js
15
10
import { Link, Route, Router } from'react-router'
16
11
```
17
12
18
-
use
13
+
use:
19
14
20
15
```js
21
16
importLinkfrom'react-router/lib/Link'
@@ -24,16 +19,3 @@ import Router from 'react-router/lib/Router'
24
19
```
25
20
26
21
The public API available in this manner is defined as the set of imports available from the top-level `react-router` module. Anything not available through the top-level `react-router` module is a private API, and is subject to change without notice.
27
-
28
-
29
-
## Use a Bundler with ES2015 Module Support
30
-
31
-
React Router offers a ES2015 module build and defines a `jsnext:main` entry point. Only if you are using a bundler that supports ES2015 modules and tree-shaking such as webpack 2 or Rollup, you can directly import from `react-router`, as long as you are correctly resolving to the ES2015 module build. Specifically, in those cases, you can write
32
-
33
-
```js
34
-
import { Link, Route, Router } from'react-router'
35
-
```
36
-
37
-
Tree-shaking will ensure that only the relevant modules will be included in your bundle.
38
-
39
-
**Note:** Please do not import from the subdirectory with the ES module build directly. If you are using webpack 2, please add `jsnext:main` to `resolve.mainFields` (or `resolve.packageMains` for older versions of webpack 2).
0 commit comments