react_app 項目開發 (3)_單頁面設計_react-router4

時間 2019-11-08

標籤 react app 項目開發頁面設計 router4 router 欄目 React 简体版

原文原文鏈接

(web) 利用 react-router4 實現單頁面開發javascript

SPA 應用 ---- (Single Page Web Application)css

整個應用只有一個完整的頁面html

單擊連接不會刷新頁面，自己不向服務器發請求前端

點擊路由連接，指揮更新局部頁面java

數據都須要經過 ajax 請求獲取，並在前臺異步展示react

路由：

指定了不一樣請求 (路由地址 key ) 對應的處理方式 valuegit

一個路由就是一個映射關係 (key: value ---- 路由路徑: 處理函數/component)github

前臺路由： value 就是一個 component 組件 -------- 不會發送 http 請求，可是界面會更新顯示對應的組件

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

後臺路由： value 就是一個處理函數 -------- 進行 http 請求/響應的過程

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

下載： 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>