react-router使用教程

tommego 發布于2019-08-20 18:22 / 3117人閱讀

react-router使用教程

關于url中#的作用:

學習: http://www.ruanyifeng.com/blo...

"#"代表網頁中的一個位置。其右面的字符，就是該位置的標識符

改變#不觸發網頁重載

改變#會改變瀏覽器的訪問歷史

window.location.hash讀取#值

window.onhashchange = func 監聽hash改變

reat-router

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

官網教程: https://github.com/reactjs/re...官方教程)

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

react-router庫中的相關組件

包含的相關組件:

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

Route: 路由組件, 注冊路由

IndexRoute: 默認路由組件

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

Link: 路由鏈接組件，生成a標簽的

Router: 路由器組件

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

子組件: Route

Route: 路由組件

屬性1: path="/xxx"

屬性2: component={Xxx}

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

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

IndexRoute: 默認路由

當父路由被請求時, 默認就會請求此路由組件

hashHistory

用于Router組件的history屬性

作用: 為地址url生成?_k=hash, 用于內部保存對應的state

Link: 路由鏈接

屬性1: to="/xxx"

屬性2: activeClassName="active"

下載相關插件：

npm install react-router@3 --save

編碼

定義各個路由組件

About.js

import React from "react"
function About() {
  return About組件內容
}
export default About

Home.js

import React from "react"
function Home() {
  return Home組件內容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}
            
        )
    }
}

定義應用組件: 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

傳遞請求參數

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}
            
        )
    }
}

GPU云服務器云服務器 react-router react-router4 使用教程如何使用教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84422.html

React Router 使用教程(阮一峰)

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

Yang_River 2019-08-20 17:03 評論0 收藏0
React工程實踐：基于React、Redux、React-Router的前端腳手架

摘要：項目地址基于和的前端腳手架。目錄前言特性環境開始工程結構開發調試單元測試靜態部署相關文檔致謝前言如果你是一個初學者，這個項目可以是很好的教程。單元測試新增一個單元測試，你只需在中創建文件。在腳手架中用于擴展服務和代理。項目地址: https://github.com/YutHelloWo... 基于React、Redux、React-Router@3.x、webpack和reacts...

wangbjun 2019-08-20 18:27 評論0 收藏0
前端學習資源整理

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

siberiawolf 2019-08-21 11:27 評論0 收藏0
實例講解react+react-router+redux

摘要：而函數式編程就不一樣了，這是模仿我們人類的思維方式發明出來的。數據流在中，數據的流動是單向的，即從父節點傳遞到子節點。數據流嚴格的單向數據流是架構的設計核心。前言總括：本文采用react+redux+react-router+less+es6+webpack,以實現一個簡易備忘錄(todolist)為例盡可能全面的講述使用react全家桶實現一個完整應用的過程。代碼地址：Re...

RiverLi 2019-08-21 11:20 評論0 收藏0
React Router 學習手冊(基礎篇)

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

DobbyKim 2019-08-22 10:40 評論0 收藏0