面试 - 认识spa与路由

import React, { Component } from "react";

export default class App extends Component {
  render() {
    return <div>APP。。。</div>;
  }
}
/**
 * （一）。spa
 *        什么是spa?
 *            1. 单页面多组件的应用，仅有一个完整页面（即一个.html）
 *            2. 根据url不同，对应路由组件的安装也卸载，整个页面无刷新，只局部更新
 * 
 * （二）。路由
 *        1. 路由是一个路径到组件的映射关系（路径：组件）
 *            路由的原理？
 *               1）.浏览器的history历史记录(栈)是路由的基石；工作原理就是对历史记录进行操作
 *                   push     (路由跳转 默认使用的是push模式,将路径压入history栈，留痕)
 *                   replace  (<Link replace to="/test" /> 切换路由时替换路径，无痕模式)
 * 
 *               2.路由链接击点击不会跳转的原理
 *                   （1) 引入一个history包，<script src="http://cdn.bootcss.com/history/4.7.2/history.js">
 *                   （2) let history = History.createbrowserHistory;
 *                    	  注：  History.createbrowserHistory;是h5推出的history上的api,兼容不好；
 *                             History.createHashHistory;锚点跳转”不刷新且有记录#后的字段不发给服务器“，localhost:3000.home.html#test1
 * 
 *                   （3) <a href=”localhost:3000/home" οnclick="return toPush('/test')"/>  function toPush(path){history.push(path) return false}
 * 						（localhost:3000---->localhost:3000/home,而localhost:3000/home.html的写法是页面）
 * 
 *               3.“路由器”会 监听 到路径改变，从而切换组件 
 *                    所以需要使用<browserRouter></browserRouter>对<APP/>进行包裹
 *                    
 *        2. 注册路由：<Routh path="/test" component={Test}>
 * 
 *  (三)。react-routr的理解
 *        react插件库，用来专门实现SPA应用
          相关API?

 */

原文地址：https://www.jb51.cc/wenti/3287681.html