React入门（五）

SPA和MPA

• SPA（Single-page Application）
  只有一个页面，所有需要展示的内容都在这一个页面中实现切换，WEBPACK中只需要配置一个入口即可（移动端单页面应用居多，PC端管理系统类也是单页面应用为主）
• MPA（Multi-page Application）
  一个项目由很多页面组成，使用这个产品，主要就是页面之间的跳转（PC端多页面应用居多）。基于框架开发的时候，需要在WEBPACK中配置多入口，每一个入口对应一个页面
• 二者区别
  MPA与SPA对比

路由

路由的两种实现方案

1.hash路由
       形式：http://www.xxx.com/#AA，真实项目中（前后端分离的项目：客户端渲染），我们经常使用的是哈希路由来完成的，它依据相同的页面地址，不同的哈希值，来规划当前页面中的哪一个组件呈现渲染，它基于原生JS构造了一套类似于history API的机制，每一次路由切换都是基于history stack完成的

class App extends React.Component {
    render() {
        return <div >
            <button onClick={ev => {
                window.location.href = window.location.href.replace(/#[a-z]+/ig, '') + '#AAA'
            }}>A</button>
            <button onClick={ev => {
                window.location.href = window.location.href.replace(/#[a-z]+/ig, '') + '#BBB'
            }}>B</button>
        </div >;
    }
}

2.browser路由
       基于History API中的pushState进行地址切换的时候，页面不刷新，地址也会改，监听到改变后实现组件的切换；但当手动刷新的时候，如果当前跳转的页面不存在，会报错，需要服务器对于不存在的页面做特殊的处理

class App extends React.Component {
    render() {
        return <div >
            <button onClick={ev => {
                window.history.pushState({},'PAGE','/AAA')
            }}>A</button>
            <button onClick={ev => {
                window.history.pushState({},'PAGE','/BBB')
            }}>B</button>
        </div >;
    }
}

React-router

• 安装方式：$ yarn add react-rooter-dom
• 相关资料：API学习文档
• 使用方式
  1.导入路由组件
  2.使用HashRouter作为根容器（只能有一个子元素），包裹整个应用
  3.使用Link或NavLink作为链接地址，并指定to属性
  4.使用Route展示路由内容，并制定path属性，默认不是严格匹配，可以根据需求设置exact / strict / render进一步完善匹配规则

// 1 导入组件
import { HashRouter, Link, Route, Switch } from 'react-router-dom'

// 2.使用HashRouter
<HashRouter>

  // 3 设置 Link / NavLink(设置后多添加一个class为active的属性)
  <Link to='/' exact>首页</Link>
  <NavLink to='/category'>分类</NavLink>
  <NavLink to='/pinWei' >品味</NavLink>

  // 4.设置路由
  // Switch确保匹配单个后不会继续匹配其他路由
  <Switch>
    // exact保证精确匹配
    <Route path='/' exact component={Home}></Route>
    <Route path='/category' component={Category}></Route>
    // 可以在component中传入回调函数进行路由验证
    <Route path='/pinWei' component={()=>{
        return <Pinwei />  
    }></Route>
    // render中一般进行“权限校验”
    <Route path='/pay' render={() => {
            let flag = localStorage.getItem('FLAG');
            if (flag && flag === 'SAFE') return <C/>;
            return '当前环境不安全，不利于支付';
        }} />
  </Switch>
</HashRouter>

• 受路由管控组件的三个属性
  1.history 实现路由跳转
  2.location 接收传递的参数信息
  3.match 存放路由地址匹配的信息
• 路由传参
  1.问号传参props.history({path:'xxx',search:'?xxx=xxx'})
  2.隐性传参props.history({path:'xxx',state:{xxx:'xxx'}})
  3.路径传参<Route path='/detail/:id' component={Detail}></Route>
• 非路由管控组件传参
  使用withRouter进行转换后，按路由管控组件的方式进行传参

import React from 'react';
import { withRouter } from 'react-router-dom';
function Header(props) {
    console.log(props);
    return <>
        公共头部
    </>;
}
export default withRouter(Header);