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

資訊專欄INFORMATION COLUMN

react-router使用教程

tommego / 3130人閱讀

react-router使用教程

關(guān)于url中#的作用:

學(xué)習(xí): http://www.ruanyifeng.com/blo...

"#"代表網(wǎng)頁中的一個(gè)位置。其右面的字符，就是該位置的標(biāo)識(shí)符

改變#不觸發(fā)網(wǎng)頁重載

改變#會(huì)改變?yōu)g覽器的訪問歷史

window.location.hash讀取#值

window.onhashchange = func 監(jiān)聽hash改變

reat-router

github主頁: https://github.com/ReactTrain...

官網(wǎng)教程: https://github.com/reactjs/re...官方教程)

一峰教程: http://www.ruanyifeng.com/blo...

react-router庫中的 相關(guān)組件

包含的相關(guān)組件:

Router: 路由器組件, 用來包含各個(gè)路由組件,用來管理路由

Route: 路由組件, 注冊(cè)路由

IndexRoute: 默認(rèn)路由組件

hashHistory: 路由的切換由URL的hash變化決定，即URL的#部分發(fā)生變化

Link: 路由鏈接組件，生成a標(biāo)簽的

Router: 路由器組件

屬性: history={hashHistory} 用來監(jiān)聽瀏覽器地址欄的變化, 并將URL解析成一個(gè)地址對(duì)象，供React Router匹配

子組件: Route

Route: 路由組件

屬性1: path="/xxx"

屬性2: component={Xxx}

根路由組件: path="/"的組件, 一般為App

子路由組件: 子配置的組件

IndexRoute: 默認(rèn)路由

當(dāng)父路由被請(qǐng)求時(shí), 默認(rèn)就會(huì)請(qǐng)求此路由組件

hashHistory

用于Router組件的history屬性

作用: 為地址url生成?_k=hash, 用于內(nèi)部保存對(duì)應(yīng)的state

Link: 路由鏈接

屬性1: to="/xxx"

屬性2: activeClassName="active"

下載相關(guān)插件：

npm install react-router@3 --save

編碼

定義各個(gè)路由組件

About.js

import React from "react"
function About() {
  return 
About組件內(nèi)容

}
export default About

Home.js

import React from "react"
function Home() {
  return 
Home組件內(nèi)容2

}
export default Home

Repos.js

import React, {Component} from "react"
import {Link} from "react-router";

export default class Repos extends Component {
    constructor(props){
        super(props);
        this.state = {
            repos : []
        }
    }
    componentDidMount(){
        let repos = [
            {name : "facebook", repo : "yarn"},
            {name : "facebook", repo : "react"},
            {name : "google", repo : "angular"},
            {name : "antd", repo : "antd"},
        ];
        this.setState({repos});
    }
    render() {
        return (
            

                
Repos 組件

                
    
                    {
                        this.state.repos.map((item, index) => {
                            return 
  • {item.repo}
    • 
                        })
                    }
                

                {this.props.children}
            

        )
    }
}

定義應(yīng)用組件: App.js

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

class App extends React.Component{
    render(){
        return (
            

                
Hello, React Router!

                
    
                    
  • about
    • 
                    
  • repos
    • 
                

                {this.props.children}
            

        )
    }
}

export default App;

定義入口JS: index.js-->渲染組件

import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, hashHistory, IndexRoute} from "react-router";
import App from "./components/App/App";
import About from "./components/About/About";
import Repos from "./components/Repos/Repos";
import Home from "./components/Home/Home";
import Repo from "./components/Repo/Repo";

ReactDOM.render(
    (
        

            

                
                
                
                    
                
            
        
    ),
    document.getElementById("root")
);

主頁面: index.html

傳遞請(qǐng)求參數(shù)

repo.js: repos組件下的分路由組件

import React from "react";
 
 function Repo({params}) {
     return 
用戶名:{params.name}, 倉庫名:{params.repo}

 }
 
 export default Repo;

repos.js

import React, {Component} from "react"
import {Link} from "react-router";

export default class Repos extends Component {
    constructor(props){
        super(props);
        this.state = {
            repos : []
        }
    }
    componentDidMount(){
        let repos = [
            {name : "facebook", repo : "yarn"},
            {name : "facebook", repo : "react"},
            {name : "google", repo : "angular"},
            {name : "antd", repo : "antd"},
        ];
        this.setState({repos});
    }
    render() {
        return (
            

                
Repos 組件

                
    
                    {
                        this.state.repos.map((item, index) => {
                            return 
  • {item.repo}
    • 
                        })
                    }
                

                {this.props.children}
            

        )
    }
}

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

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

相關(guān)文章

  • React Router 使用教程(阮一峰)

    摘要：它是官方維護(hù)的，事實(shí)上也是唯一可選的路由庫。表示的這個(gè)部分是可選的。另一種做法是，使用指定當(dāng)前路由的。而組件會(huì)使用路徑的精確匹配。否則用戶直接向服務(wù)器請(qǐng)求某個(gè)子路由，會(huì)顯示網(wǎng)頁找不到的錯(cuò)誤。 真正學(xué)會(huì) React 是一個(gè)漫長的過程。 你會(huì)發(fā)現(xiàn)，它不是一個(gè)庫，也不是一個(gè)框架，而是一個(gè)龐大的體系。想要發(fā)揮它的威力，整個(gè)技術(shù)棧都要配合它改造。你要學(xué)習(xí)一整套解決方案，從后端到前端，都是全新的做...

    Yang_River 評(píng)論0 收藏0

  • React工程實(shí)踐：基于React、Redux、React-Router的前端腳手架

    摘要：項(xiàng)目地址基于和的前端腳手架。目錄前言特性環(huán)境開始工程結(jié)構(gòu)開發(fā)調(diào)試單元測試靜態(tài)部署相關(guān)文檔致謝前言如果你是一個(gè)初學(xué)者，這個(gè)項(xiàng)目可以是很好的教程。單元測試新增一個(gè)單元測試，你只需在中創(chuàng)建文件。在腳手架中用于擴(kuò)展服務(wù)和代理。 項(xiàng)目地址: https://github.com/YutHelloWo... 基于React、Redux、[email protected]、webpack和reacts...

    wangbjun 評(píng)論0 收藏0

  • 前端學(xué)習(xí)資源整理

    稍微整理了一下自己平時(shí)看到的前端學(xué)習(xí)資源，分享給大家。 html MDN：Mozilla開發(fā)者網(wǎng)絡(luò) SEO：前端開發(fā)中的SEO css 張鑫旭：張鑫旭的博客 css精靈圖：css精靈圖實(shí)踐 柵格系統(tǒng)：詳解CSS中的柵格系統(tǒng) 媒體查詢：css媒體查詢用法 rem布局：手機(jī)端頁面自適應(yīng)布局 移動(dòng)前端開發(fā)之viewport的深入理解:深入理解viewport 淘寶前端布局：手機(jī)淘寶移動(dòng)端布局 fl...

    siberiawolf 評(píng)論0 收藏0

  • 實(shí)例講解react+react-router+redux

    摘要：而函數(shù)式編程就不一樣了，這是模仿我們?nèi)祟惖乃季S方式發(fā)明出來的。數(shù)據(jù)流在中，數(shù)據(jù)的流動(dòng)是單向的，即從父節(jié)點(diǎn)傳遞到子節(jié)點(diǎn)。數(shù)據(jù)流嚴(yán)格的單向數(shù)據(jù)流是架構(gòu)的設(shè)計(jì)核心。 前言 總括： 本文采用react+redux+react-router+less+es6+webpack,以實(shí)現(xiàn)一個(gè)簡易備忘錄(todolist)為例盡可能全面的講述使用react全家桶實(shí)現(xiàn)一個(gè)完整應(yīng)用的過程。 代碼地址：Re...

    RiverLi 評(píng)論0 收藏0

  • React Router 學(xué)習(xí)手冊(cè)(基礎(chǔ)篇)

    摘要：該手冊(cè)是基于和使用教程學(xué)習(xí)編寫而成，可能會(huì)有描述不夠清楚的地方，大家可自行參考原文，為提供了一個(gè)完整的路由庫，它允許你通過的變化來控制組件的切換與變化有關(guān)全家桶的其余相關(guān)文章，可以查看以下鏈接，會(huì)持續(xù)更新別眨眼看安裝使用進(jìn)行安裝之后 該手冊(cè)是基于react-router 和 React Router 使用教程 學(xué)習(xí)編寫而成，可能會(huì)有描述不夠清楚的地方，大家可自行參考原文， React ...

    DobbyKim 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

tommego

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<