路由创建
HashRouter和BrowserRouter的使用
(官网推荐的是BrowserRouter,但是此方式需要服务器配合,所以就使用HashRoute啦)
引用方式如下:
控件说明:
使用<Switch>组件来包裹一组<Route>。<Switch>会遍历自身的子元素(即路由)并对第一个匹配当前路径的元素进行渲染。
<Redirect>组件用于路由的跳转,即用户访问一个路由,会自动跳转到另一个路由。(重定向)
属性说明:
exact 使用exact只匹配‘/login’,像‘/login/user’都不会被匹配,不加就能匹配到。
path通配符:
:paramName
匹配URL的一个部分,直到遇到下一个/
、?
、#
为止。()
表示URL的这个部分是可选的。
路由跳转传值
路由:
<Route path="/pcmanage/:identity/:status" component={StatusList}/>
跳转方式:
或
获得的路径:
/#/pcmanage/supply/1?xx#hash
props获取到的值:
值获取方式如下:
this.props.location.state(传复杂不想在地址栏出现的参数)
this.props.match.params.xx(传在地址栏可见的参数)
注意:在跳转到的界面需要使用withRouter包装一下才能获取到值:
import { withRouter } from 'react-router-dom'
const DrawCircle = withRouter(CircleApp);