(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. 第五节: EF高级属性(一) 之 本地缓存、立即加载、延迟加载(不含导航属性)

    一. 本地缓存 从这个章节开始,介绍一下EF的一些高级特性,这里介绍的首先介绍的EF的本地缓存,在前面的“EF增删改”章节中介绍过该特性(SaveChanges一次性会作用于本地缓存中所有的状态的变化 ...

  2. Selective Search for Object Recognition（理解）

    0 - 背景 在目标检测任务中,我们希望输入一副图像,输出目标所在的位置以及目标的类别.最常用的算法是滑动窗口方法,但滑动窗口其实相当于穷举图像中的所有子图像,其效率低且精度也受限.该论文提出一种新的 ...

  3. Ansible------角色

    什么是角色 角色是一种解决问题的思想,也是一种规范. 目录 角色的目录结构如下: files: 存放由copy或script模块等调用的文件. templates: template模块查找所需要模板 ...

  4. vmware 14 密钥

    VMware 2017 v14.x 永久许可证激活密钥 FF31K-AHZD1-H8ETZ-8WWEZ-WUUVA CV7T2-6WY5Q-48EWP-ZXY7X-QGUWD 来源链接: http:/ ...

  5. Django之会议室预预订

    model表设计: from django.db import models from django.contrib.auth.models import AbstractUser # Create ...

  6. apt-get本地软件源搭建

    参考:https://www.cnblogs.com/myitroad/p/4970416.html 试验机器: Ubuntu 12.04.Lubuntu.Debian都可,其他版本应该也没问题,服务 ...

  7. 【译】索引进阶（六）：SQL SERVER索引书签

    [译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正] 原文链接:传送门. 在之前的章节,我们把索引看做一组有序条目的集合,每行数据对应一个索引条目.我们解释了很多关于索引逻辑方面的内容, ...

  8. SqlCommand.Parameters的使用

     在c#中执行sql语句时,避免会遇到传参的问题.Parameters就是用来做参数化查询,不然很容易被黑客拿到数据. 一.简介 引用自:https://msdn.microsoft.com/ZH-C ...

  9. VMware的NAT网络模式

    参考链接:https://www.cnblogs.com/linjiaxin/p/6476480.html 图例:

  10. Mockito框架入门教程（一）

    官网: http://mockito.org API文档:http://docs.mockito.googlecode.com/hg/org/mockito/Mockito.html 项目源码:htt ...