一、spa(单页面应用)底层原理
1、喵点(hash) window.onhashchange
2、h5(history)
二、react -router
导入react-router-dom里面的三个组件
- BrowserRoute/HashRouter 路由容器
- Route 需要该组件定义好路径和显式组建的对应关系
- Link类似一个a链接,实现声明式跳转
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
class App extends React.Component{
render(){
return {
<Router>
<a href='#/home'>首页</a>
<a href='#/news'>新闻</a>
<a href='#/profile'>个人</a>
/*声明式路由*/
<Link to='/home'>首页</Link>
<Link to='/news'>新闻</Link>
<Link to='/profile'>个人</Link>
/*使用route定义映射关系,路径对应组件(页面)*/
/*render属性值是一个函数组件,当url地址和path匹配的时候,就会加载该函数式组件*/
<Route path='/renders' render={()=>{
return (
<div>渲染函数<div>
)
}></Route>
/**1、 to 代表要跳转的路径 2、component 显示组件(页面)*/
<Route path='/home' component={Home}></Route>
<Route path='/news' component={News}></Route>
<Route path='/profile' component={Profile}></Route>
/*特性1:无论hash是否和path匹配。children里面的都会被渲染出来*/
/*特性2:children函数式组件接受一个参数props,如果path和url匹配上,则props里面的match就是一个对象,
对象里面包含了地址相关的信息*/
<Route path='/about' childern={()=>{
return (
<div>你好<div>
)
}></Route>
</Router>
}
}
}
注: react-router-dom内置NavLink实现当前项高亮
三、 react-router匹配
- 在react-router里面,匹配的时候。默认情况下是完全的匹配,从上到下全部匹配一遍,如果能匹配上,渲染出来,不会终止
- exact 实现完全的精准的匹配
* Switch具有排他性,只要匹配上了就会停止,不会向下继续匹配*
<Switch>
/* 包裹路由注册表*/
<Route></Route>
<Switch>