(web) 利用 react-router4 实现 单页面 开发

SPA 应用 ---- (Single Page Web Application)

整个应用只有 一个完整的页面

单击链接不会刷新页面，本身不向服务器发请求

点击路由链接，指挥更新局部页面

数据都需要通过 ajax 请求获取，并在前台异步展现

  • 路由：

指定了 不同请求 (路由地址 key ) 对应的 处理方式 value

一个路由就是一个映射关系 (key: value ---- 路由路径: 处理函数/component)

  • 前台路由： value 就是一个 component 组件 -------- 不会发送 http 请求，但是界面会更新显示对应的组件

<Route path="/about" component={About}>

  • 后台路由： value 就是一个处理函数 -------- 进行 http 请求/响应 的过程

router.post("/login", (req, res)=>{});

  • 下载： npm install react-router-dom --save        // 添加到 生产依赖

如果是开发跨平台应用： npm install react-router-dom --save        // 添加到 生产依赖

单页面 react 应用

HashRouter

  • index.js

import {BrowserRouter, HashRouter, Switch} from "react-router-dom";

// 用 HashRouter 会有 #/home ---- 哈希值

// 明文 经过 hash  md5 转换成 32 位的 密文 ---- 同一明文 得到的 密文 始终一致

// 之所以有 # ，是因为利用了 锚点 不会发请求, history 的旧属性 hash 值

App.jsx

// 1. 定义路由链接

<NavLink className="xxx" to="/about">About</NavLink>

<NavLink className="xxx" to="/about">Home</NavLink>

// 2. 定义路由显示

<Switch>

<Route path="/about" component={About}/>

<Route path="/home" component={Home}/>

<Redirect to="/Home">    // 3. 默认定向到 Home 页面

// 4. 重新指定 active 为 activeClass

// <Route path="/home" component={Home} activeClassName="activeClass"/>

<Switch>

---------------- 包装已有组件生成自定义风格的组件 ------------------------------

  • 利用了 ...扩展运算符，无论 父组件传什么，都接收了，然后传递给子组件

  • 嵌套路由

/home/news

BrowserRouter

路由路径没有 #

利用 HTML5 新语法实现

  • 以 前端路由实现 为例
  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8"/>
    
        <title>HashHistory - Browseristory</title>

        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    
        <meta name="viewport"
    
              content="user-scalable=no,
    
                       width=device-width,
    
                       initial-scale=1.0,
    
                       minimum-scale=1.0,
    
                       maximum-scale=1.0"/>

        <style rel="stylesheet" type="text/css">
    
            .unSelectedAble {
    
                /* 内容不可以被选中 */
    
                -webkit-user-select: none;
    
                -moz-user-select: none;
    
                -ms-user-select: none;
    
                user-select: none;
    
            }

            * {
    
                padding: 0;
    
                margin: 0;
    
            }

            a {
    
                text-decoration: none;
    
            }

            ul,
    
            ol {
    
                list-style: none;
    
            }

            input {
    
                outline: none;
    
            }

            img {
    
                display: block;
    
            }

            html,
    
            body {
    
                height: 100%;
    
                /* overflow: hidden; */
    
            }

            /**** Start ****/
    
            html {
    
                /* touch-action: none; */
    
            }

            #wrap {
    
                width: 100%;
    
                min-height: 100%;

                background-color: #b3ccaf;
    
            }

            #content {
    
                box-shadow: inset 0 0 200px #6d5b2a;
    
                width: 100%;
    
                padding-bottom: 50px;
    
                padding-top: 50px;
    
                padding-left: 50px;
    
                -webkit-box-sizing: border-box;
    
                -moz-box-sizing: border-box;
    
                box-sizing: border-box;

                font-size: 14px;
    
                color: #4b1f4a;
    
                background-color: #f0f0eb;
    
            }

            #footer {
    
                box-shadow: 0 0 88px #6d5b2a;
    
                width: 100%;
    
                height: 50px;
    
                margin-top: -50px;

                color: #f0f0eb;
    
                background-color: #998d68;
    
                text-align: center;
    
                line-height: 50px;
    
            }

            button {
    
                height: 36px;
    
                margin: 20px;
    
                padding: 4px;

                color: #000;
    
                font-size: 18px;
    
                background-color: #94b5b2;
    
                border: 0 none;
    
                border-radius: 6px;
    
            }

            button:hover {
    
                transform: scale(1.2);
    
                box-shadow: 0 0 88px #6d5b2a;
    
            }

            button:active {
    
                transform: scale(1);
    
                box-shadow: 0 0 40px #6d5b2a;
    
            }

            input {
    
                padding: 6px;
    
                font-size: 18px;
    
                margin: 0 2px;
    
                background-color: #b76f59;
    
                border: 0 none;
    
            }
    
        </style>
    
    </head>

    <body class="unSelectedAble">

        <!-- 模拟屏幕区域 -->
    
        <div id="wrap">

            <!-- 内容区域 -->
    
            <div id="content">
    
                <p><label>
    
                    <input type="text">
    
                </label></p>
    
                <a href="/index" onclick="return push('/index')">js push 跳转到 index</a><br><br>
    
                <button onClick="push('/test2')">push 跳转到 test2</button>&nbsp;
    
                <button onClick="replace('/test3')">replace 跳转到 test3</button><br><br>
    
                <button onClick="back()">回退</button>&nbsp;
    
                <button onClick="forword()">前进</button><br><br>
    
            </div>
    
        </div>

        <!-- 底部区域 -->
    
        <div id="footer">
    
            Copyright ©2019 耶梦加德
    
        </div>

        <script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script>
    
        <script type="text/javascript">
    
            let history = History.createBrowserHistory(); // 方式一
    
            // history = History.createHashHistory() // 方式二
    
            // console.log(history)

            function push (to) {
    
                history.push(to);
    
                return false
    
            }

            function back() {
    
                history.goBack()
    
            }

            function forword() {
    
                history.goForward()
    
            }

            function replace (to) {
    
                history.replace(to)
    
            }

            history.listen((location) => {
    
                console.log('请求路由路径变化了', location)
    
            })
    
        </script>
    
    </body>
    
</html>

组件间的 params 参数传递 ---- 三级路由

定义路由路径时

所以 MessageDetail 返回的 li 应该是

<li>{this.props.match.params.id}</li>

路由跳转

  • 路由链接 - 声明式路由导航   

页面调转交给组件去完成

  • js 之 编程式路由导航 this.porps.history

push 和 replace 的区别在于 goBack() / goForward() 时返回不同的页面

源码： Source

react_app 项目开发 (3)_单页面设计_react-router4的更多相关文章

  1. react_app 项目开发 (5)_前后端分离_后台管理系统_开始

    项目描述 技术选型 react API 接口 接口文档,url,请求方式,参数类型, 根据文档描述的方法,进行 postman 测试,看是否能够得到理想的结果 collections - 创建文件取项 ...

  2. com.panie 项目开发随笔_功能任务设计（2016.12.28）

    (一) 第一个菜单 做什么好呢? 1)上次 在研究的功能 是 爬虫,需要将定时爬虫的任务加进来 2)博客的页面,也需要重新布局出来 3)需要做一个,添加博客的页面 (二) 那就先做博客管理吧! 先添加 ...

  3. react_app 项目开发 (4)_ React UI 组件库 ant-design 的基本使用

    最流行的开源 React UI 组件库 material-ui 国外流行(安卓手机的界面效果)文档 ant-design 国内流行 (蚂蚁金服 设计,一套 PC.一套移动端的____下拉菜单.分页.. ...

  4. react_app 项目开发 (7)_难点集合

    /src/App/Admin/Header 布局 import {Row, Col} from "antd" <div className="header_box& ...

  5. react_app 项目开发 (8)_角色管理_用户管理----权限管理 ---- shouldComponentUpdate

    角色管理 性能优化(前端面试) 需求:只要执行 setState(), 就会调用 render  重新渲染.由于有时调用了 setState,但是并没有发生状态的改变,以致于不必要的刷新 解决: 重写 ...

  6. react_app 项目开发 (6)_后台服务器端-node

    后台服务器端 负责处理前台应用提交的请求,并向前台返回 json 数据 前台应用 负责 展现数据与用户交互 发 ajax 请求与后台应用交互 yarn add axios /src/api/ajax. ...

  7. react_app 项目开发 (9)_数据可视化 ECharts

    数据可视化 ECharts yarn add echarts echarts-for-react

  8. react_app 项目开发

    react_app 项目开发 npm install -g create-react-app npm root -g        // 查看安装包位置 创建项目 create-react-app m ...

  9. com.panie 项目开发随笔_数据字典（2017.2.24）

    (一) 做一个网站,第一步需要考虑的是从哪个地方开始下手.首先,每一个功能肯定有最基本的增删改查功能,而此功能一般都分为两个页面. 1) 列表显示页面.用列表来展示数据库中的数据,多用于分页显示.该页 ...

随机推荐

  1. nodemon 热更新

    sudo npm i -g nodemon nodemon app.js

  2. Windows Server 在IIS上创建安全网站

    第一步.打开服务器管理器,创建用户,并设置密码,自己记录下来,注意勾选密码永不过期. 第二步.设置用户隶属组:IIS_IUSRS. 第三步.设置建立的网站文件夹权限,添加刚才建立的用户,并添加修改.读 ...

  3. Form -------- 使用

    Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 1.创建Form类 from django.f ...

  4. JGUI源码：从头开始，建一个自己的UI框架（1）

    开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQue ...

  5. Bootstrap模态框钩子事件

    事件类型   描述show.bs.modal show 方法调用之后立即触发该事件.如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget 属性进行访问.shown.b ...

  6. pdb调试神器使用终极指南

    pdb为python程序实现了一个交互式调试环境.它包括一些特性,可以暂停程序,查看变量值,以及逐步监视程序执行,从而能了解程序具体做了什么,并查找逻辑中存在的bug. 启动调试工具 使用pdb的第一 ...

  7. 【原创】大数据基础之Hive（1）Hive SQL执行过程之代码流程

    hive 2.1 hive执行sql有两种方式: 执行hive命令,又细分为hive -e,hive -f,hive交互式: 执行beeline命令,beeline会连接远程thrift server ...

  8. liunx 修改ssh 端口22

    vim  /etc/ssh/sshd_config 找到Port  22  添加 Port 5002 重启sshd /bin/systemctl restart sshd.service 防火墙释放5 ...

  9. python之配置日志的三种方式

    以下3种方式来配置logging: 1)使用Python代码显式的创建loggers, handlers和formatters并分别调用它们的配置函数: 2)创建一个日志配置文件,然后使用fileCo ...

  10. C# .Net String字符串效率提高-字符串拼接

    字符串操作是编程中非常频繁的操作,特别是在拼接字符串的时候.下面来说说字符串拼接的效率提升. 1. 减少装箱 值类型与引用类型之间的转换存在装箱与拆箱操作:将值类型转换成引用类型的操作叫装箱,将引用类 ...