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
Copy file name to clipboardexpand all lines: ISSUE_TEMPLATE.md
+2-3
Original file line number
Diff line number
Diff line change
@@ -6,8 +6,8 @@ Have a usage question?
6
6
The issue tracker isn't the best place for usage questions. This format is not well-suited for Q&A, and questions here don't have as much visibility as they do elsewhere. Before you ask a question, here are some resources to get help first:
7
7
8
8
- Do the tutorial: https://github.com/reactjs/react-router-tutorial
9
-
- Read the docs: https://github.com/reactjs/react-router/tree/latest/docs
For questions and support, please visit [our channel on Reactiflux](https://discord.gg/0ZcbPKXt5bYaNQ46) or [Stack Overflow](http://stackoverflow.com/questions/tagged/react-router).
29
29
@@ -49,10 +49,10 @@ var Route = require('react-router').Route
49
49
var Link =require('react-router').Link
50
50
```
51
51
52
-
The UMD build is also available on [npmcdn](https://npmcdn.com):
52
+
The UMD build is also available on [unpkg](https://unpkg.com):
@@ -127,7 +127,7 @@ See more in the [Introduction](/docs/Introduction.md), [Guides](/docs/guides/REA
127
127
128
128
### Versioning and Stability
129
129
130
-
We want React Router to be a stable dependency that’s easy to keep current. We follow the same versioning as React.js itself: [React Versioning Scheme](https://facebook.github.io/react/blog/2016/02/19/new-versioning-scheme.html).
130
+
We want React Router to be a stable dependency that’s easy to keep current. We take the same approach to versioning as React.js itself: [React Versioning Scheme](https://facebook.github.io/react/blog/2016/02/19/new-versioning-scheme.html).
131
131
132
132
### Thanks
133
133
@@ -138,14 +138,14 @@ React Router was initially inspired by Ember's fantastic router. Many thanks to
138
138
139
139
Also, thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to run our build in real browsers.
When the router is ready to render a branch of route components, it will use this function to create the elements. You may want to take control of creating the elements when you're using some sort of data abstraction, like setting up subscriptions to stores, or passing in some sort of application module to each component via props.
56
56
57
-
```jsx
57
+
```js
58
58
<Router createElement={createElement} />
59
59
60
60
// default behavior
@@ -94,14 +94,15 @@ A `<Link>` can know when the route it links to is active and automatically apply
94
94
95
95
#### Props
96
96
##### `to`
97
-
A [location descriptor](https://github.com/ReactTraining/history/blob/master/docs/Glossary.md#locationdescriptor) or a function that takes the current location and returns a location descriptor. This location descriptor is usually a string or an object, with the following semantics:
97
+
A [location descriptor](/docs/Glossary.md#locationdescriptor). Usually this is a string or an object, with the following semantics:
98
98
99
99
* If it's a string it represents the absolute path to link to, e.g. `/users/123` (relative paths are not supported).
100
100
* If it's an object it can have four keys:
101
101
*`pathname`: A string representing the path to link to.
102
102
*`query`: An object of key:value pairs to be stringified.
103
103
*`hash`: A hash to put in the URL, e.g. `#a-hash`.
104
104
*`state`: State to persist to the `location`.
105
+
* If it is not specified, an anchor tag without an `href` attribute will be rendered.
105
106
106
107
_Note: React Router currently does not manage scroll position, and will not scroll to the element corresponding to `hash`._
107
108
@@ -140,7 +141,7 @@ You can also pass props you'd like to be on the `<a>` such as a `title`, `id`, `
140
141
#### Example
141
142
Given a route like `<Route path="/users/:userId" />`:
// becomes one of these depending on your History and if the route is
146
147
// active
@@ -157,8 +158,22 @@ Given a route like `<Route path="/users/:userId" />`:
157
158
### `<IndexLink>`
158
159
An `<IndexLink>` is like a [`<Link>`](#link), except it is only active when the current route is exactly the linked route. It is equivalent to `<Link>` with the `onlyActiveOnIndex` prop set.
159
160
160
-
### `withRouter(component)`
161
-
A HoC (higher-order component) that wraps another component to provide `props.router`, `props.params`, `props.location`, and `props.routes`. Pass in your component and it will return the wrapped component.
161
+
### `withRouter(Component, [options])`
162
+
A HoC (higher-order component) that wraps another component to provide `props.router`. Pass in your component and it will return the wrapped component.
163
+
164
+
You can explicit specify `router` as a prop to the wrapper component to override the router object from context.
165
+
166
+
#### Options
167
+
168
+
##### `withRef`
169
+
If `true`, the wrapper component attaches a ref to the wrapped component, which can then be accessed via `getWrappedInstance`.
A `<RouterContext>` renders the component tree for a given router state. Its used by `<Router>` but also useful for server rendering and integrating in brownfield development.
@@ -172,7 +187,7 @@ Contains data and methods relevant to routing. Most useful for imperatively tran
172
187
##### `push(pathOrLoc)`
173
188
Transitions to a new URL, adding a new entry in the browser history.
174
189
175
-
```jsx
190
+
```js
176
191
router.push('/users/12')
177
192
178
193
// or with a location descriptor object
@@ -242,9 +257,9 @@ If left undefined, the router will try to match the child routes.
242
257
A single component to be rendered when the route matches the URL. It can
243
258
be rendered by the parent route component with `this.props.children`.
244
259
245
-
```jsx
260
+
```js
246
261
constroutes= (
247
-
<Route component={App}>
262
+
<Route path="/"component={App}>
248
263
<Route path="groups" component={Groups} />
249
264
<Route path="users" component={Users} />
250
265
</Route>
@@ -265,13 +280,13 @@ class App extends React.Component {
265
280
##### `components`
266
281
Routes can define one or more named components as an object of `[name]: component` pairs to be rendered when the path matches the URL. They can be rendered by the parent route component with `this.props[name]`.
267
282
268
-
```jsx
283
+
```js
269
284
// Think of it outside the context of the router - if you had pluggable
270
285
// portions of your `render`, you might do it like this:
@@ -389,7 +404,7 @@ Same as `childRoutes` but asynchronous and receives `partialNextState`. Useful f
389
404
###### `callback` signature
390
405
`cb(err, routesArray)`
391
406
392
-
```jsx
407
+
```js
393
408
let myRoute = {
394
409
path:'course/:courseId',
395
410
childRoutes: [
@@ -436,7 +451,7 @@ Same as `indexRoute`, but asynchronous and receives `partialNextState`. As with
436
451
###### `callback` signature
437
452
`cb(err, route)`
438
453
439
-
```jsx
454
+
```js
440
455
// For example:
441
456
let myIndexRoute = {
442
457
component: MyIndex
@@ -472,7 +487,7 @@ The path you want to redirect to.
472
487
##### `query`
473
488
By default, the query parameters will just pass through but you can specify them if you need to.
474
489
475
-
```jsx
490
+
```js
476
491
// Say we want to change from `/profile/123` to `/about/123`
477
492
// and redirect `/get-in-touch` to `/contact`
478
493
<Route component={App}>
@@ -484,7 +499,7 @@ By default, the query parameters will just pass through but you can specify them
484
499
485
500
Note that the `<Redirect>` can be placed anywhere in the route hierarchy, though [normal precedence](/docs/guides/RouteMatching.md#precedence) rules apply. If you'd prefer the redirects to be next to their respective routes, the `from` path will match the same as a regular route `path`.
486
501
487
-
```jsx
502
+
```js
488
503
<Route path="course/:courseId">
489
504
<Route path="dashboard"/>
490
505
{/* /course/123/home -> /course/123/dashboard */}
@@ -520,7 +535,7 @@ A route's component is rendered when that route matches the URL. The router will
520
535
### Injected Props
521
536
522
537
#### `location`
523
-
The current [location](https://github.com/reactjs/history/blob/master/docs/Location.md).
538
+
The current [location](https://github.com/mjackson/history/blob/v2.x/docs/Location.md).
524
539
525
540
#### `params`
526
541
The dynamic segments of the URL.
@@ -532,13 +547,13 @@ The route that rendered this component.
532
547
Contains methods relevant to routing. Most useful for imperatively transitioning around the application.
533
548
534
549
#### `routeParams`
535
-
A subset of `this.props.params` that were directly specified in this component's route. For example, if the route's path is `users/:userId` and the URL is `/users/123/portfolios/345` then `this.props.routeParams` will be `{userId: '123'}`, and `this.props.params` will be `{userId: '123', portfolioId: 345}`.
550
+
A subset of `this.props.params` that were directly specified in this component's route. For example, if the route's path is `users/:userId` and the URL is `/users/123/portfolios/345` then `this.props.routeParams` will be `{userId: '123'}`, and `this.props.params` will be `{userId: '123', portfolioId: '345'}`.
536
551
537
552
#### `children`
538
553
The matched child route element to be rendered. If the route has [named components](/docs/API.md#named-components) then this will be undefined, and the components will instead be available as direct properties on `this.props`.
539
554
540
555
##### Example
541
-
```jsx
556
+
```js
542
557
render((
543
558
<Router>
544
559
<Route path="/" component={App}>
@@ -564,7 +579,7 @@ class App extends React.Component {
564
579
When a route has one or more named components, the child elements are available by name on `this.props`. In this case `this.props.children` will be undefined. All route components can participate in the nesting.
565
580
566
581
#### Example
567
-
```jsx
582
+
```js
568
583
render((
569
584
<Router>
570
585
<Route path="/" component={App}>
@@ -622,7 +637,7 @@ For more details, please see the [histories guide](/docs/guides/Histories.md).
622
637
`hashHistory` uses URL hashes, along with a query key to keep track of state. `hashHistory` requires no additional server configuration, but is generally less preferred than `browserHistory`.
623
638
624
639
625
-
### `createMemoryHistory(options)`
640
+
### `createMemoryHistory([options])`
626
641
`createMemoryHistory` creates an in-memory `history` object that does not interact with the browser URL. This is useful for when you need to customize the `history` object used for server-side rendering, for automated testing, or for when you do not want to manipulate the browser URL, such as when your application is embedded in an `<iframe>`.
This function is to be used for server-side rendering. It matches a set of routes to a location, without rendering, and calls a `callback(error, redirectLocation, renderProps)` when it's done.
0 commit comments