成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React的路由深入

Zack / 1615人閱讀

摘要：本篇深入路由的參數(shù)獲取路由的兩種模式續(xù)上篇的路由基本使用本篇代碼還是基于之前的代碼繼續(xù)深入路由的參數(shù)獲取從包中導(dǎo)入組件，注意這里使用解構(gòu)然后使用組件給商品添加商品鏈接，通常是商品商品列表添加商品詳情組件獲取路由參數(shù)的方式給我們自定義

本篇深入React路由的參數(shù)獲取、路由的兩種模式

續(xù)上篇：React的路由基本使用

本篇代碼還是基于之前的代碼繼續(xù)深入

React路由的參數(shù)獲取

從react-router-dom包中導(dǎo)入Link組件，注意這里使用解構(gòu)

然后使用Link組件給商品添加商品鏈接，通常是商品id

// file: /src/components/Shop.js

"use strict";

import React from "react";
import axios from "axios";
import { Link } from "react-router-dom";

export default class News extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            shop: []
        };
    }

    componentWillMount() {
        axios("http://localhost:8000/shop.php")
            .then((res) => {
                this.setState({
                    shop: res.data
                });
            });
    }

    render() {
        return 

            
商品列表

            {this.state.shop.map((item) => {
                return 

                    
{item.title}

                    
{item.desc}

                    

            })}
        
;
    }
}

添加商品詳情組件

獲取路由參數(shù)的方式：this.props.match.params

// file：src/components/Detail.js

import React from "react";

export default class Detail extends React.Component {
    render() {
        return 

            {this.props.match.params.id}
        

    }
}

給我們自定義的路由組件添加到商品詳情的路由

并且注意這里需要給商品之前的商品路由"/products"這個(gè)Route組件添加exact這個(gè)屬性，因?yàn)闆]有添加exact的情況會全局匹配

exact表示精準(zhǔn)匹配

// file: src/components/MyRouter.js

import React from "react";
import News from "../components/News";
import Shop from "../components/Shop";
import Detail from "../components/Detail";

import {
    HashRouter as Router,
    Route,
    Link
} from "react-router-dom";

export default class MyRouter extends React.Component {

    render() {
        return 
            

                
    
                    
  • 首頁
    • 
                    
  • 商品
    • 
                    
  • 新聞
    • 
                


                


                
                
                
                
            

        
    }
}

修改php實(shí)現(xiàn)的商品接口，給商品列表添加商品id數(shù)據(jù)返回

 101, "title" => "Apple 11", "url" => "https://www.mi#/apple", "desc" => "蘋果皮個(gè)"],
    ["id" => 102, "title" => "HuaWei MAX 20", "url" => "https://www.246ha.com/huawei", "desc" => "華為威武"]
];

echo json_encode($shop);

訪問頁面，點(diǎn)擊商品查看效果：

點(diǎn)擊商品標(biāo)題，查看跳轉(zhuǎn)后獲取的傳參:

路由的兩種模式

React 支持HTML5 History和 hash 兩種路由模式

修改方式：

// file：src/components/MyRouter.js

// Hash模式
import {HashRouter as Router} from Router,

// HTML5 History模式
import {BrowserRouter as Router} from Router,

原文鏈接：https://www.mi#/articles...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105863.html

相關(guān)文章

  • React路由深入實(shí)戰(zhàn)用戶登錄

    摘要：本篇基于路由來實(shí)戰(zhàn)用戶登錄功能，會涉及到表單的數(shù)據(jù)綁定表單提交和登錄判斷等新玩意。 本篇基于React路由來實(shí)戰(zhàn)用戶登錄功能，會涉及到表單的數(shù)據(jù)綁定、表單提交和登錄判斷等新玩意。 showImg(https://segmentfault.com/img/remote/1460000019833533?w=560&h=310); 續(xù)上篇：React的路由深入 先來創(chuàng)建一個(gè)組件 - 登錄表...

    williamwen1986 評論0 收藏0

  • 深入redux技術(shù)棧

    摘要：另外，內(nèi)置的函數(shù)在經(jīng)過一系列校驗(yàn)后，觸發(fā)，之后被更改，之后依次調(diào)用監(jiān)聽，完成整個(gè)狀態(tài)樹的更新?？偠灾?，遵守這套規(guī)范并不是強(qiáng)制性的，但是項(xiàng)目一旦稍微復(fù)雜一些，這樣做的好處就可以充分彰顯出來。 這一篇是接上一篇react進(jìn)階漫談的第二篇，這一篇主要分析redux的思想和應(yīng)用，同樣參考了網(wǎng)絡(luò)上的大量資料，但代碼同樣都是自己嘗試實(shí)踐所得，在這里分享出來，僅供一起學(xué)習(xí)(上一篇地址:個(gè)人博客／s...

    imingyu 評論0 收藏0

  • 深入redux技術(shù)棧

    摘要：另外，內(nèi)置的函數(shù)在經(jīng)過一系列校驗(yàn)后，觸發(fā)，之后被更改，之后依次調(diào)用監(jiān)聽，完成整個(gè)狀態(tài)樹的更新?？偠灾袷剡@套規(guī)范并不是強(qiáng)制性的，但是項(xiàng)目一旦稍微復(fù)雜一些，這樣做的好處就可以充分彰顯出來。 這一篇是接上一篇react進(jìn)階漫談的第二篇，這一篇主要分析redux的思想和應(yīng)用，同樣參考了網(wǎng)絡(luò)上的大量資料，但代碼同樣都是自己嘗試實(shí)踐所得，在這里分享出來，僅供一起學(xué)習(xí)(上一篇地址:個(gè)人博客／s...

    VPointer 評論0 收藏0

  • 從路由原理出發(fā)，深入閱讀理解react-router 4.0的源碼

    摘要：通過前端路由可以實(shí)現(xiàn)單頁應(yīng)用本文首先從前端路由的原理出發(fā)，詳細(xì)介紹了前端路由原理的變遷。接著從的源碼出發(fā)，深入理解是如何實(shí)現(xiàn)前端路由的。執(zhí)行上述的賦值后，頁面的發(fā)生改變。 ??react-router等前端路由的原理大致相同，可以實(shí)現(xiàn)無刷新的條件下切換顯示不同的頁面。路由的本質(zhì)就是頁面的URL發(fā)生改變時(shí)，頁面的顯示結(jié)果可以根據(jù)URL的變化而變化，但是頁面不會刷新。通過前端路由可以實(shí)現(xiàn)...

    Miyang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<