1.1、基本用法
单页面得特点:只需要加载一次主页面,通过局部刷新,就可以实现跳转或者切换页面
优点:加载速度快,用户体验比较好
缺点:
- 第一次加载比传统要慢一点
- 不利seo
- 页面相对复杂
- 返回键
1.2安装react-router-dom
cnpm install react-router-dom
下载到生产环境的依赖中。
在组件中通过对象的解构方式去获取到`react-router-dom`内置组件,在组件中,按需引入内置组件,在页面中进行使用:
- HashRouter表示一个路由的根容器,将来所有的路由相关的东西,都要包裹在HashRouter里面,而且一个网站中,只需要使用一次HashRouter就好了;
- Route表示一个路由规则,在Route上,有两个比较重要的属性,path,component
- Link表示一个路由的链接
代码示例
render(){ return ( <HashRouter> <div> <h1>这是网站的根目录</h1> <hr /> <Link to="/home">首页</Link> <Link to="/movie/">电影</Link> <Link to="/about">关于</Link> <hr /> <Route path="/home" component={Home} ></Route><hr/> <Route path="/movie" component={Movie} exact></Route><hr/> <Route path="/about" component={About}></Route><hr/> </div> </HashRouter> ); }
当使用HashRouter把APP根组件的元素包裹起来之后,网站就已经启用路由了,在一个HashRouter中,只能有唯一的一个根元素。 在一个网站中,只需要使用唯一的一次`<HashRouter></HashRouter>`就行了。
Route创建的标签,就是路由规则,其中path表示要匹配的路由,component表示要展示的组件。Route具有两种身份:1.它是一个路由匹配规则;2.它是一个占位符,表示将来匹配到的组件都放到这个位置
需要注意的地方
- Route 组件path地址是以/开头 ,配置component属性,是显示的组件,这个属性不可以大写
- Route组件可以单双标签使用,单标签需要/结尾,双标签不可以在中间写入别的东西
- Link to属性的地址也是/开头,Link在页面渲染的是a标签
2.1、路由传值
通过配置路由的地址,在Link跳转时
- Route path路径后面 /:id (key)
- Link to 路径后面 /top/10 (value)
接收传值:
- class类组件,this.props.match.params.属性名
- 函数组件:形参.match.params.属性名
代码示例
render(){ return ( <HashRouter> <div> <h1>这是网站的根目录</h1> <hr /> <Link to="/movie/top/10">电影</Link> <hr /> <Route path="/movie/:type/:id" component={Movie} exact></Route> </div> </HashRouter> ); }
在Route内置组件中,配置path地址:
<Route path="/movie/:type/:id" component={Movie} exact></Route>
在Link内置组件中,配置to属性,进行跳转:
<Link to="/movie/top/10">电影</Link>
类组件中通过生命周期进行接收,this.props携带路由传递过来的数据:
render(){ console.log(this); return ( <div> 电影--{this.props.match.params.type}--{this.props.match.params.id} </div> ); }
代码优化后:
class Movie extends React.Component{ constructor(props){ super(); this.state = { routeParams:props.match.params } } render(){ console.log(this); return ( <div> 电影--{this.state.routeParams.type}--{this.state.routeParams.id} </div> ); } }
函数组件中通过形参接收传递过来的值,props形参,函数组件作为路由组件,props就是传递过来的对象,里面携带着路由传递过来的数据
import React from 'react' export default function home(props) { return ( <div> {props.match.params.id} </div> ) }
2.2、嵌套路由
嵌套路由:在路由组件中,使用Link, Route,配置子路由,实现跳转,切换;
下面为一级路由,在一级路由Home为路由组件
<Route path="/home" component={ Home }></Route>
在Home组件中继续使用Link,Route进行路由的嵌套,需要注意的就是路由地址,前部分为一级路由地址,后面接一个二级路由相应的路径
render() { return ( <div> <ul> <li><Link to="/home/a">推荐</Link></li> <li><Link to="/home/b">新时代</Link></li> <li><Link to="/home/c">动漫</Link></li> </ul> <Route path="/home/a" component={ A }></Route> <Route path="/home/b" component={ B }></Route> <Route path="/home/c" component={ C }></Route> </div> ) }
2.3、JS实现路由跳转
引入BrowserRouter模块
import {BrowserRouter,HashRouter,Route,Link} from 'react-router-dom'
使用BrowserRouter作为根容器
jump(){ window.location.href = "/news" } render(){ return ( <BrowserRouter> <div> <h1>这是网站的根目录</h1> <hr /> <button onClick={()=>{this.jump()}}>新闻</button> <hr /> <Route path="/news" component={News}></Route> </div> </BrowserRouter> ); }
在render方法中,写一个按钮,按钮名称为js跳转路由,定义一个onClick方法,箭头函数解决this指向问题,与render同级,定义一个jump方法,在jump方法中执行一句代码进行路由跳转,使用window.location.href = “路由的地址”实现路由跳转。
3、react-router-dom内置组件
首先按需引入,使用什么内置组件,就需要引入
import { BrowserRouter, Link, Route,Redirect,NavLink,Switch } from 'react-router-dom'
3.1、在组件中使用NavLink
NavLink 带有选中activeClassName ,如果路由处于激活状态,显示激活class样式。
在我们之前案例的基础上,找到Link组件,我们已经学到Link组件的作用,可以进行路由的跳转,通过to属性,跳转相应的path地址。
```html// <ul> <li> <Link to="/home">首页</Link> </li> <li> <Link to="/video">好看视频</Link> </li> </ul>
将组件中的Link全部换成NavLink组件
``html// <li> <NavLink activeClassName="red" to="/home">首页</NavLink> </li> <li> <NavLink activeClassName="red" to="/video">好看视频</NavLink> </li> ```
我们会发现,之前可以正常进行路由跳转,换成NavLink,还依然可以正常跳转,证明组件得跳转使用NavLink也可以实现,那么问题来了,NavLink有什么用,为什么封装了NavLink,将每一个NavLink加入一个activeClassName属性绑定一个class类样式,这时在触发NavLink时,会触发相应得样式,这样有一个切换效果。
3.2、在组件中使用Redirect内置组件
Redirect 重定向 具备to属性,可以直接跳转到指定路由。
在render方法中,使用内置组件,Redirect内置组件使用to属性,当执行到内置标签是,会进行to跳转路由,to后面接的地址是什么,就可以匹配到相应得路由组件。
```html// <Redirect to="/home/c"></Redirect>
3.3、在组件使用Switch内置组件
Switch 具有排他性
在组件中使用Switch标签包裹所有得Route,这时,Route相当于每一个path都是精准的匹配,展示相应的组件,最后一个Route是一个不具备地址的路由路径,如果当Link指向一个不存在的地址时,没有精准的匹配到地址,那么会显示到C404路由,使用Switch只会显示一个组件,匹配到为止。
``html// <Switch> <Route path="/home" component={ Home }></Route> <Route path="/video" component={ Home1 }></Route> <Route path="/book" component={ Home2 }></Route> <Route path="/renwu" component={ Home3 }></Route> <Route path="/user" component={ Home4 }></Route> <Route component={ C404 }></Route> </Switch> ```