react-router 4.x
1. 安装:npm install --save react-router react-router-dom
2. 在页面中配置
1. 引入 import { Route,BrowserRouter,Switch } from "react-router-dom"
2. 基本配置
路由配置:
<BrowserRouter>
<Switch>
<Route path='/about' component={About}></Route>
<Route path='/' component={Home}></Route>
</Switch>
</BrowserRouter>
导航配置:
<Link to='/'>首页</Link>
3. 4.x版本路由配置规则:
从上往下匹配,只要有匹配成功的,就立即停止。
4. 精准匹配
exact 精准匹配:<Route exact path='/abcd' />
作用:用户访问的路径必须和path中的路径一模一样,才匹配成功。
5. 路由嵌套
1.路由中出现子级路由,就是路由嵌套
2.父级组件作为嵌套路由的标签
3.嵌套路由中使用<Switch></Switch>包裹所有的路由
4.子级路由的path路径要带父级路径
举例:
<BrowserRouter>
<Switch>
<Route exact path='/' component={Home}></Route>
<Route path='/about' component={About}></Route>
{/* <Route path='/kemu' component={Kemu}></Route> */}
<!-- 科目是由子级路由的,就是一个嵌套路由 -->
<Kemu path='/kemu'>
<Switch>
<Route path='/kemu/yuwen' component={Yuwen}></Route>
<Route path='/kemu/shuxue' component={Shuxue}></Route>
<Route path='/kemu/yingyu' component={Yingyu}></Route>
</Switch>
</Kemu>
</Switch>
</BrowserRouter>
路由传递携带参数:
①在路由定义路由参数:
<Route path="/detail/:id" component={Detail}></Route>
②使用<Link to=" ">调用
<Link to={`/detail/${item.id}`}>
③在详情页接收数据,方法:this.props.match.params.属性
return(
<div>
详情页面:{this.props.match.params.id}
</div>
)