美文网首页Web前端之路让前端飞程序员
create-react-app路由的实现原理

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

作者: 苗泽云 | 来源:发表于2017-10-19 11:01 被阅读787次

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

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

    • 请求发送到服务器之后,服务器会返回一个常常的html页面字符串,然后浏览器解析字符串,开始绘图,解析过程中发现了script标签,再次发送一次请求,用来请求html页面,到此所有后台请求全部结束
    • 所有的页面跳转都是基于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;
    
    

    喜欢的话,欢迎大家去我的csdn博客学习更多的内容

    相关文章

      网友评论

        本文标题:create-react-app路由的实现原理

        本文链接:https://www.haomeiwen.com/subject/exkuuxtx.html