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

資訊專欄INFORMATION COLUMN

react-router-dom v^4學(xué)習(xí)歷程（一）

KevinYan / 2768人閱讀

摘要：用于精準(zhǔn)匹配路徑，不用也會匹配到匹配的路徑的子路徑，這樣兩個(gè)路由組件都會顯示。路徑中傳遞參數(shù)到路由到的組件，就是在路徑前面加上這樣這個(gè)路由地址就會變成一個(gè)參數(shù)被組件接受到。例如可以獲取到當(dāng)前的基礎(chǔ)路徑。

react-router-dom的版本已經(jīng)更新到了4.1.1，那么我們就一起來學(xué)習(xí)學(xué)習(xí)react v4這個(gè)新版路由的基本使用吧！

在學(xué)習(xí)路由之前我們先需要復(fù)習(xí)幾個(gè)基礎(chǔ)知識，關(guān)于react組件的構(gòu)建，和分離組件到另外的文件

生成react組件的方式

我們可以采用一個(gè)函數(shù)來快速生成一個(gè) react組件

觀察如下代碼

import React from "react"
const Mycomponent=()=>(
  

    
這是我的第一個(gè)函數(shù)組件

  

  
)
ReactDOM.render(,document.getElementById("example"))

渲染組件到根節(jié)點(diǎn)上，可以看出沒有任何問題。
我們也可以把這個(gè)組件分離到另外一個(gè)文件中，用es6的 語法import default export導(dǎo)入導(dǎo)出，然后在index.jsx中引用它

//Mycomponent.jsx
import React from "react"
const Mycomponent=()=>(
  

    
這是我的第一個(gè)函數(shù)組件

  

  
)
export default Mycomponent
//index.jsx
import Mycomponent from "./Mycomponent"

這樣我們就可以做到函數(shù)式構(gòu)建的react組件在react項(xiàng)目中模塊化使用

第二種就是我們常用的class方式聲明組件

   import React from "react"
    export default class Topic extends React.Component{
    
    render(){
      return (
        

        
{this.props.match.params.topicId}

      

    
        )
      }
    }
向構(gòu)造react組件模板的函數(shù)中傳入路由參數(shù)

如果一個(gè)react組件作為Route的component屬性值，如下

函數(shù)式聲明Home時(shí)，它的模板定義函數(shù)就會默認(rèn)接受一個(gè)對象作為參數(shù)，里面包含了路由的各種信息

這樣我們就可以利用模板定義函數(shù)參數(shù)中的信息獲取到路由中的參數(shù)。
`

  const Topic=({match})=>//es6語法將參數(shù)對象中的match屬性
 (                         //賦值給參數(shù)match
 


{match.params.topicId}

 

)

如果是用類的方式聲明的組件那么獲取路由參數(shù)信息的辦法是在jsx渲染模板中
this.props.match.params

預(yù)備知識完畢，下面我們就看看怎么做一個(gè)react路由

路由基本用法

路由要解決的基本需求是從一個(gè)鏈接點(diǎn)擊到另外一個(gè)鏈接，在頁面中無刷新跳轉(zhuǎn)到頁面的另外一部分內(nèi)容。類似于tabs面板。
例如有如下界面

三個(gè)組件如下：

const App=()=>(
  
主頁

)
const Hot=()=>(
熱門
)
const Content=()=>(
  
文章

)
const Zhuanlan=()=>(

  
專欄


)

那么在需要使用路由的頁面組件里面，渲染如下模板

 import {Link,Route,BrowserRouter as Router} from "react-router-dom" 
  (
  

    
    
      
  • 主頁
    • 
      
  • 熱門
    • 
      
  • 專欄
    • 
    

    

    
    
    
  

)

注意使用Router作為最外層標(biāo)簽，里面只能有一個(gè)一級子節(jié)點(diǎn)，用Link來導(dǎo)航 ，to指定路徑，Route指定要導(dǎo)航到的組件，這樣一個(gè)路由的基本使用就成型了。exact用于精準(zhǔn)匹配路徑，不用exact也會匹配到匹配的路徑的子路徑，這樣兩個(gè)路由組件都會顯示。我們需要的是每次切換只會顯示一個(gè)Route中指定的組件

路由的嵌套和路徑中參數(shù)傳遞

在一個(gè)子組件Hot中，再嵌套一個(gè)子路由我們應(yīng)該怎么做？
很簡單就是把路由Route再寫入Hot的模板中實(shí)現(xiàn)路由嵌套。

路徑中傳遞參數(shù)到路由到的組件，就是在路徑前面加上: ,這樣這個(gè)路由地址就會變成一個(gè)參數(shù)被組件接受到。例如${match.url}/:id
${match.url}可以獲取到當(dāng)前的基礎(chǔ)路徑。然后在路由用到的組件中可以用

match.params(函數(shù)式聲明的組件中,match需要在函數(shù)參數(shù)中引入)或this.props.match.params（React class類render函數(shù)中）
示例如下

  ///父組件中
    const Hot=({match})=>(

    
    
熱門

    文章
    問答
    新聞
    

    
    
    
)
    //子組件中
    const Content=({match})=>(
  

  
熱門子目錄


{match.params.type}

  

)

總結(jié)
1.組件生成的方式有兩種，render在類中顯式渲染，函數(shù)生成。
2.路由的基本用法Router>Route path component指定路徑和組件，Link添加導(dǎo)航按鈕鏈接，to指定路徑地址
3.路由的嵌套，直接在子組件模板中添加Route，Link，match.url引入基礎(chǔ)路徑
4.路由路徑參數(shù)傳遞到模板，用baseUrl/:id類似格式，組件中用match.params.id接收。

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

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

相關(guān)文章

  • todo-list 項(xiàng)目問題總結(jié)（使用 react 進(jìn)行開發(fā)）

    摘要：項(xiàng)目問題總結(jié)這個(gè)項(xiàng)目，很簡單，前端使用，后端使用進(jìn)行開發(fā)。方便移動端開發(fā)。當(dāng)動畫結(jié)束后，有一個(gè)鉤子函數(shù)可以使用其他一些功能組件，都是自己嘗試去編寫的，像日歷組件組件組件等。版本的，是沒有任何的鉤子函數(shù)，我就感覺懵逼了。。。 todo-list 項(xiàng)目問題總結(jié) 這個(gè) todo-list 項(xiàng)目，很簡單，前端使用 react，后端 nodejs 使用 koa2 進(jìn)行開發(fā)。數(shù)據(jù)庫使用 Mysql...

    shengguo 評論0 收藏0

  • vue(1)-學(xué)習(xí)歷程之vue解決jquery的什么痛點(diǎn)

    摘要：解決的痛點(diǎn)首先我們需要明白和理解和的設(shè)計(jì)初衷和理念。所有框架要解決的問題應(yīng)對需求變化，防止大面積重寫。參考文獻(xiàn)漸進(jìn)式框架理解核心功能原理解析百度網(wǎng)盤視頻學(xué)習(xí)以及源碼資源提取密碼 vue解決jquery的痛點(diǎn) 首先我們需要明白和理解jquery和vue的設(shè)計(jì)初衷和理念。 jquery官網(wǎng)給出的開篇介紹是，jquery是一個(gè)快，小，功能豐富的js庫，它讓html文檔遍歷和操作，事件處理...

    zhaofeihao 評論0 收藏0

  • Python的發(fā)展歷程

    摘要：可以脫離語言環(huán)境獨(dú)立運(yùn)行就像一本英文書，我找一個(gè)翻譯，給他點(diǎn)時(shí)間，把英文書翻譯成中文的，這就是編譯型語言解釋型語言有良好的平臺兼容性，在任何環(huán)境中都可以運(yùn)行，前提是安裝了解釋器虛擬機(jī)。就像還是一本英文書，我看一句讓他給我解釋一句。 寫在前面 隨著大數(shù)據(jù)、人工智能這類詞匯撲向我們，python這個(gè)早在1989就已經(jīng)出現(xiàn)的語言終于高調(diào)回歸,為了更好的學(xué)習(xí)python 我們先來了解下它的前世...

    lovXin 評論0 收藏0

  • 深度學(xué)習(xí)與神經(jīng)網(wǎng)絡(luò)全局概覽：核心技術(shù)的發(fā)展歷程

    摘要：在學(xué)習(xí)過程中，神經(jīng)網(wǎng)絡(luò)的突觸權(quán)重會以一種有序的方式進(jìn)行修改，從而實(shí)現(xiàn)所需的目標(biāo)。中間單元的數(shù)量被稱為網(wǎng)絡(luò)所用的片的數(shù)量。 隨著神經(jīng)網(wǎng)絡(luò)的進(jìn)化，許多過去曾被認(rèn)為不可想象的任務(wù)現(xiàn)在也能夠被完成了。圖像識別、語音識別、尋找數(shù)據(jù)集中的深度關(guān)系等任務(wù)現(xiàn)在已經(jīng)變得遠(yuǎn)遠(yuǎn)更加簡單了。在此向這一領(lǐng)域的杰出的研究者致以真誠的謝意，正是他們的發(fā)現(xiàn)和成果幫助我們利用上了神經(jīng)網(wǎng)絡(luò)的真正力量。如果你真正對追求機(jī)器學(xué)習(xí)這...

    Jenny_Tong 評論0 收藏0

發(fā)表評論

0條評論

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