1.使用Link 首先需要引入Link 模塊。
import { Link } from 'react-router'
2.通過 Link to設置路由跳轉地址,以及需要傳遞的參數對象,注意,此處to 中所攜帶的路由和參數也是一個對象。
<Link to={{
pathname: `detail/${id}`,
state: 'hello',
}}>點擊跳轉
</Link>
2、to=對象,帶參數跳轉(pathname, query, hash, state(額外數據)),注意:這些參數都被存放到this.props.location中
<li>
<Link to={
{
pathname:"/jump",
hash:'#ahash',
query:{foo: 'foo', boo:'boo'},
state:{data:'hello'}
}
} activeClassName="GlobalNav-active">點擊跳轉
</Link>
</li>
3、to=函數,註冊到路由跳轉事件中,每一次路由變化,都會執行該函數,並經最新的location作爲參數。
<Link to={location => ({ ...location, query: { name: 'ryan' } })}>
Hello
</Link>
4、不使用Link,在函數內直接操作router
舊版本:由於router只用的context傳遞路由信息,因此每一個組件都可以輕易的通過this.context.router獲取路由
新版本:router被放置在this.props中,通過this.props.router可以獲取路由