1.Router组件和Route组件都可以使用自闭合,也可以采用闭合标签的形式。即:
<Router />
和
<Router> </Router>
这两种形式都可以。
2.组件的属性Router
组件有history
和routes
属性Route
组件有path
和component
属性,其中path属性可以省略。
IndexRoute
组件有component
属性,显式指定跟路由的子组件,如<IndexRoute component={Home} />
,
指定根路由'/'下加载Home组件。
Redirect
组件有from
和to
属性,用于路由的跳转,即用户访问一个路由,会自动跳转到另一个路由。。IndexRedirect
组件有to
属性,用于访问根路由的时候,将用户重定向到某个子组件
Link
组件有to
、activeStyle
、activeClassName
属性
<Link to="about" activeStyle={{color:'red'}} activeClassName="active" />
IndexLink
有to
、activeStyle
、activeClassName
属性
<IndexLink to="/" activeStyle={{color:'red'}} activeClassName="active" />
如果链接到根路由/,不要使用Link组件,而要使用IndexLink组件
3.URL
的查询字符串/foo?bar=baz
,可以用this.props.location.query.bar
获取
注意 path 属性中的 :id 就是该路由的参数( param )
URL的参数值,可以用this.props.params.id
来获取
4.location
可以看做URL的对象形式的表示,
Location
A location
object is conceptually similar to document.location
in web browsers,with a few extra goodies. location
objects have the following properties:
pathname The pathname portion of the URL,without query string search The query string portion of the URL,including the ? state An object of data tied to this location action One of PUSH,REPLACE,or POP key A unique identifier for this location
5.
Route Components
A route's component is rendered when that route matches the URL. The router will inject the following properties into your component when it's rendered:
Injected Props
location
The current location.
params
The dynamic segments of the URL.
route
The route that rendered this component.
routeParams
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'}
.
children
The matched child route element to be rendered. If the route has named components then this will be undefined,and the components will instead be available as direct properties on this.props
.