3
3
Adds the router's ` history ` object to your component instance.
4
4
5
5
** Note** : You do not need this mixin for route components, its already
6
- avaible as ` this.props.history ` . This is for components deeper in the
6
+ available as ` this.props.history ` . This is for components deeper in the
7
7
render tree that need access to the router's history object.
8
8
9
9
### Methods
@@ -50,7 +50,18 @@ Stringifies the query into the pathname, using the router's config.
50
50
Creates a URL, using the router's config. For example, it will add ` #/ ` in
51
51
front of the ` pathname ` for hash history.
52
52
53
- ### Example
53
+ #### ` isActive(pathname, query) `
54
+
55
+ Returns ` true ` or ` false ` depending on if the current path is active.
56
+ Will be true for every route in the route branch matched by the
57
+ ` pathname ` (child route is active, therefore parent is too).
58
+
59
+ ##### arguments
60
+
61
+ - ` pathname ` - the full url with or without the query.
62
+ - ` query ` - an object that will be stringified by the router.
63
+
64
+ ### Examples
54
65
55
66
``` js
56
67
import { History } from ' react-router'
@@ -71,6 +82,29 @@ React.createClass({
71
82
})
72
83
```
73
84
85
+ Let's say you are using bootstrap and want to get ` active ` on those ` li `
86
+ tags for the Tabs:
87
+
88
+ ``` js
89
+ import { Link , History } from ' react-router'
90
+
91
+ let Tab = React .createClass ({
92
+
93
+ mixins: [ History ],
94
+
95
+ render () {
96
+ let isActive = this .history .isActive (this .props .to , this .props .query )
97
+ let className = isActive ? ' active' : ' '
98
+ return < li className= {className}>< Link {... this .props }/ >< / li>
99
+ }
100
+
101
+ })
102
+
103
+ // use it just like <Link/>, and you'll get an anchor wrapped in an `li`
104
+ // with an automatic `active` class on both.
105
+ < Tab href= " foo" > Foo< / Tab>
106
+ ```
107
+
74
108
### But I’m using Classes
75
109
76
110
> Notice how we never told you to use ES6 classes? :)
0 commit comments