react 路徑、重定向和傳參問題

路徑

相對路徑

不以 / 開頭的路徑，匹配對應的父組件路徑

<Route path="index" component={index}>

<Route path="messages/:id" component={Message}/>

</Route>

訪問路徑：/index/messages/:id

 

絕對路徑

以 / 開頭的路徑。如果嵌套路由中使用會跳出父組件的影響

<Route path="index" component={index}>

<Route path="/message/:id" component={Message}/>

<Route>

訪問路徑：/messages/：id

---

 

重定向

當路徑匹配到from的時候，自動重定向（跳轉）到to的地址上面

<Route path="/index" component={Index}

<Redirect from="/index/a" to="/other"/>

</Route>

從/index/a跳轉到/other

重定向

<IndexRedirect to="/home"/>

---

 

地址欄傳參params

<Link to="/user/1">usre</Link>

<Route path="/user/:id" component={User/}

取得參數：

this.props.params.id==1

---

 

查詢符query

定義

<Route path="/user/:id" component={User/}

取得參數

this.props.params.id

例如

<Link to={{pathName:'/list',query:{id:item.goodsID} }}

<Route path="/user" component={User}/>

url: /user/10086?foo=bar

this.props.params.userld是10086

this.props.location.query.foo是bar