create-react-app路由的实现原理

create-react-app中路由的简要阐述

用create-react-app创建出来的应用为单页面应用，什么意思呢？就是说在你的浏览器的地址栏输入地址按下回车键的一瞬间，浏览器会向服务器发送一次请求，请求一个html页面，之后的所有能看见的页面的跳转等等都是基于这个页面实现的，换句话说浏览器不会再向服务器请求其他的页面

• 请求发送到服务器之后，服务器会返回一个常常的html页面字符串，然后浏览器解析字符串，开始绘图，解析过程中发现了script标签，再次发送一次请求，用来请求js文件，到此所有前台需要呈现的文件请求全部结束
• 所有的页面跳转都是基于js逻辑来实现的

---

create-react-app中路由实现的基本原理

比如在app.js文件中一共引入了三个页面组件，你想做一件什么事情呢？你想访问http://localhost:3000/ 这个地址的时候呈现home首页 这个组件，访问http://localhost:3000/login地址的时候呈现login登录这个组件，访问http://localhost:3000/content地址的时候呈现content内容页这个组件

那么需要怎么做呢？其实特别简单，判断一下地址栏的值，（hash值：不会随着地址栏传递到服务器中）保存hash值为this.state属性，判断hash值是否改变，如果改变就改变state的值，state的值改变了就会重绘页面，就会重新判断hash值，进而选择不同的组件进行渲染

import React, { Component } from 'react';
import './App.css';

class A extends Component{
    render(){
        return(
            <div>注册页面</div>
        )
    }
}
class B extends Component{
    render(){
        return(
            <div>登录页</div>
        )
    }
}
class App extends Component {
    constructor(){
        super();
        this.state={
            hash:"#/"
        }
    }
    componentDidMount(){
        window.onhashchange = ()=>{
            this.setState({
                hash:window.location.hash
            });
        }
    }
    render() {
        let o;
        let {hash} = this.state;
        switch (hash) {
            case "#/":
                o = (
                    <div>首页</div>
                );
                break;
            case "#/login":
                o = <B/>;
                break;
            case "#/register":
                o = <A/>;
                break;
        }
        return (
            <div className="App">
                {o}
            </div>
        );
    }
}

export default App;