要点
路由的模式有两种、hash模式、history模式、路由的动态传参、重定向、高阶路由组件。
标准
react的路由保证了界面和URL的同步,拥有简单的API和强大的功能。react中的路由模式有两种,分别是:hash路由和history路由。
- 首先用析构的方法引入需要用到的路由方式,需要注意的是路由所有的配置都必须被包裹在hash路由或者history路由里面。
- 然后在路由标签内先再配置Route标签,它的参数有:path,路由匹配的路径。component,路由匹配成功之后渲染的组件。
- react中路由的跳转使用Link标签,它的参数to指路由匹配的路径,也需要引入。NavLink标签和Link的区别就是渲染成a标签之后会自带一个class属性,对应的是NavLink标签的active属性。
- react路由中有高阶路由组件withRouter,它和普通路由一样需要引入,主要作用是增加了路由跳转的方式,可以调用history方法进行函数中路由的跳转。
- react中路由的动态传值是一个重点,{/:属性名}和{/属性名/值}搭配的方式进行传值,在需要接收参数的组件通过this.props.match.params来进行接收。react中路由的query传值是通过问号的方法将参数拼接在url之后,在需要接收参数的组件通过url.parse(this.props.location.search).query获取参数。
- 路由的重定向需要用组件Redirect来完成,参数to是目标组件。
- 路由的懒加载需要从react中引入Suspense和lazy,引入组件时通过lazy(() =>
import())来引入,使用Suspense标签将Route包裹起来即可。
重点:
react中路由模式分为hash路由和history路由。hash路由的原理是window.onhashchange监听,url前面会有一个#号,这个就是锚点,每个路由前面都会有#锚点,特点是#之后的数据改变不会发起请求,因此改变hash不会重新加载页面。history路由的原理是window.history API,在HTML5中新增了pushState和replaceState方法,这两个方法是在浏览器的历史记录栈上做文章,提供了对历史记录做修改的功能,虽然更改了url但是不会向服务器发起请求。history模式虽然去掉了hash模式的#锚点,但是它怕刷新,因为刷新时是真实的请求。而hash模式下,修改的是#锚点之后的信息,浏览器不会将#锚点之后的数据发送到服务器,所以没有问题。
延伸阅读:
基本使用
import React from 'react'
import { HashRouter,Route,Link,withRouter } from 'react-router-dom' // 引入路由各项功能
const Test = () => import('./Test') // 通过懒加载的方法引入组件
class App extends Component{
constructor(props) {
super(props)
}
componentDidMount() {
console.log(this.props.match.params.id) // 在当前组件渲染完成时,读取从上一个组件路由中动态传值带过来的数值
this.props.history.push() // 高阶路由在函数中的跳转方法
}
render(){
return (
<Link to='/Test/1'>go to test</Link> // 通过路由的动态传值方法给Test组件传输id=1
<Suspense> // 通过懒加载的方法包裹路由
<HashRouter>
<Route path="/Test/:id" component={Test} /> // 在路由规则中创建动态接收参数方法
</HashRouter>
</Suspense>
)
}
}
export default withRouter(App) // 通过高阶路由组件的方法可以让App组件的函数方法具备路由跳转功能