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);