react-router学习笔记

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.