-
单页面应用（SPA）
：单个页面的web应用，只有一个页面，所有需要展示的应用都在这一个页面实现切换（手机网站居多、或者PC端管理系统类也是但页面为主）
webpack只需要配置一个入口 -
多页面应用（MPA）
：指一个项目有很多页面组成，使用这个产品，主要就是页面之间调转（PC端多页面应用居多）
基于框架开发，需要在webpack中配置多入口，每个入口对应一个页面
- react-router-dom （3.x之前版本叫react-router）
学习react-router-dom官网
http://reacttraining.cn/web/api/
import {BrowserRouter , HashRouter} from 'react-router-dom'
-
BrowserRouter,HashRouter他是两种常用的路由实现思想，
BrowserRouter浏览器路由
他是基于H5中的history API(puahState,replaceState,popstate)来保持UI和URL的同步
真实项目中应用不多，一般只有当前项目是基于服务器渲染的，来我们才会用浏览器路由
HashRouter 哈希路由
真实项目中（前后端分离项目中）我们经常使用的是哈希路由完成，它依据相同的页面地址，不通的哈希值，来规划当前页面中的那一个组件呈现它基于原声JS构造了一套类似于history API机制，每一次路由切换都是基于history stack 完成的！
ReactDOM.render(
<Provider store = {store}>
<HashRouter>
<div>
<Route path='/' exact component={A} />
<Route path='/user' component={B} />
<Route path='/my' component={C} />
</div>
</HashRouter>
</Provider>
,
document.querySelector("#root"))
HashRouter
- 当前项目一旦使用HashRouter则默认在页面地址后面加上“#/” HashRouter默认值是一个 /
- 我们一般让其显示首页内容 HashRouter中只能出现一个子元素
- HashRouter机制中，我们需要根据哈希地址不同，展示不同的组件内容，此时使用route
route
- path:设置匹配的地址，但是默认不是严格匹配模式 可以加 exact严格属性
- component：一旦当前route和path相同就渲染component知道的组件
-
exact strict两种严格模式
- render : render是一个方法，一般在里面处理的是权限校验,一般返回一个组件
<Route path='/my' render={()=>{
return <C/>
}} />
- HashRouter 默认情况下会和每一个route都做校验，哪怕之前有校验成功的
-
switch : 使用switch标签把route包裹起来，这样当path匹配到合适的之后就不会向下继续匹配了
- 当route中没有path属性的话就是匹配所有界面
<Route render={()=>{
return <div>404</div>
}}/>
-
redirect : 重定向 有push属性，如果设置了push属性，当前跳转的地址会加入到history stack中一条记录
image.png
- withRouter 在路由切换的时候所有收路由管控的组件会刷新一下，但是这个时候有些不受路由管控的组件也需要刷新，这时候我们用
withRouter
import {HashRouter , Route , Redirect , Switch , withRouter} from 'react-router-dom'
export default withRouter(connect()(Detail))
-
history``location``match所有收路由管控的组件，在组件的属性PROPS上都会默认添加三个属性
history： 实现js中的路由跳转
location: 得到当前路由中的信息
match：获取的是当前路由匹配的一些结果
- 路由跳转传递参数（除了redux和本地储存 不推荐）
- 问号传参数
去除❓需要使用插件QS 安装qs
-
基于Link中的state传值（一旦页面刷新，上次传递的值就没有了）
-
URL地址传参（需要根改路由）
路由修改
传递
解析（使用match）
image.png
find函数
- 当路由切换的时候，对应的组件会重新渲染，但是渲染也分为两种情况
- 之前渲染其他组件的时候把当前组件彻底重页面中移除了，再次渲染组件的之后走的是挂载流程（也就是重头开始）
- 如果当前组件之前没有彻底在页面中移除（在本组件中的子组件切换），每一次走的是更新的流程，不是挂载的流程
55 02
网友评论