1、React路由介绍
1.1、单页面应用
单页面得特点:只需要加载一次主页面,通过局部刷新,就可以实现跳转或者切换页面
优点:加载速度快,用户体验比较好
缺点:
- 第一次加载比传统要慢一点
- 不利seo
- 页面相对复杂
- 返回键
1.2、安装react-router-dom
在项目命令行中,执行
cnpm install react-router-dom -S
下载到生产环境的依赖中。
在组件中通过对象的解构方式去获取到react-router-dom
内置组件,在组件中,按需引入内置组件,在页面中进行使用:
- HashRouter表示一个路由的根容器,将来所有的路由相关的东西,都要包裹在HashRouter里面,而且一个网站中,只需要使用一次HashRouter就好了;
- Route表示一个路由规则,在Route上,有两个比较重要的属性,path,component
- Link表示一个路由的链接,属性to
import {HashRouter,Route,Link} from 'react-router-dom'
代码示例:
render(){
ret