create-react-app中路由的簡(jiǎn)要闡述

用create-react-app創(chuàng)建出來(lái)的應(yīng)用為單頁(yè)面應(yīng)用，什么意思呢？就是說(shuō)在你的瀏覽器的地址欄輸入地址按下回車鍵的一瞬間，瀏覽器會(huì)向服務(wù)器發(fā)送一次請(qǐng)求，請(qǐng)求一個(gè)html頁(yè)面，之后的所有能看見的頁(yè)面的跳轉(zhuǎn)等等都是基于這個(gè)頁(yè)面實(shí)現(xiàn)的，換句話說(shuō)瀏覽器不會(huì)再向服務(wù)器請(qǐng)求其他的頁(yè)面

• 請(qǐng)求發(fā)送到服務(wù)器之后，服務(wù)器會(huì)返回一個(gè)常常的html頁(yè)面字符串，然后瀏覽器解析字符串，開始繪圖，解析過(guò)程中發(fā)現(xiàn)了script標(biāo)簽，再次發(fā)送一次請(qǐng)求，用來(lái)請(qǐng)求html頁(yè)面，到此所有后臺(tái)請(qǐng)求全部結(jié)束
• 所有的頁(yè)面跳轉(zhuǎn)都是基于js邏輯來(lái)實(shí)現(xiàn)的

create-react-app中路由實(shí)現(xiàn)的基本原理

比如在app.js文件中一共引入了三個(gè)頁(yè)面組件，你想做一件什么事情呢？你想訪問(wèn)http://localhost:3000/ 這個(gè)地址的時(shí)候呈現(xiàn)home首頁(yè) 這個(gè)組件，訪問(wèn)http://localhost:3000/login地址的時(shí)候呈現(xiàn)login登錄這個(gè)組件，訪問(wèn)http://localhost:3000/content地址的時(shí)候呈現(xiàn)content內(nèi)容頁(yè)這個(gè)組件

那么需要怎么做呢？其實(shí)特別簡(jiǎn)單，判斷一下地址欄的值，（hash值：不會(huì)隨著地址欄傳遞到服務(wù)器中）保存hash值為this.state屬性，判斷hash值是否改變，如果改變就改變state的值，state的值改變了就會(huì)重繪頁(yè)面，就會(huì)重新判斷hash值，進(jìn)而選擇不同的組件進(jìn)行渲染

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

class A extends Component{
    render(){
        return(
            <div>注冊(cè)頁(yè)面</div>
        )
    }
}
class B extends Component{
    render(){
        return(
            <div>登錄頁(yè)</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>首頁(yè)</div>
                );
                break;
            case "#/login":
                o = <B/>;
                break;
            case "#/register":
                o = <A/>;
                break;
        }
        return (
            <div className="App">
                {o}
            </div>
        );
    }
}

export default App;

喜歡的話，歡迎大家去我的csdn博客學(xué)習(xí)更多的內(nèi)容