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

 

转载于:https://www.cnblogs.com/guqzhoublog/p/11314081.html