REACT 009 react ROUTER (路由)

作者: 苏少冬 | 来源:发表于2020-05-07 15:06 被阅读0次

单页面应用（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 : 得到当前路由中的信息
![](https://img.haomeiwen.com/i11136901/72bc0709d12adb6f.png?imageMogr2/auto-orient/strip%7Cimage View2/2/w/1240)
match ：获取的是当前路由匹配的一些结果