React-Router入門
阿新 • • 發佈:2018-02-17
今天 路徑和 epon post class app 一段 核心 有用
之前自己有在用React來重構之前寫過的自己工作室官網,其中有用到React中的核心思想:組件,props,state。還有用Rap的接口來實現前後端交互請求(就是請求團隊成員的信息部分)。自己覺得還是實現起來比較簡單。
現在呢。學習React不僅要學習官網的一些知識,還要學習一些有關它的技術棧。
今天自己搜索了阮一峰的有關React-Router的教程。自己跟著github上的14個小栗子進行了練習。
下面總結一些。
先粘貼一段代碼:
//route.js module.exports = ( <Route path="/" component={App}> <Route path="/repos" component={Repos}> <Route path="/repos/:username/:repoName" component={Repo} /> </Route> <Route path="/about" component={About} /> </Route> ); //index.js import React from ‘react‘ import { render } from ‘react-dom‘ import {Router,browserHistory} from ‘react-router‘; import routes from ‘./modules/routes‘; render(<Router history={browserHistory} routes={routes} />,document.getElementById(‘app‘));
相信瀏覽一遍上面的代碼之後,就會發現主要有Router,Route這兩個組件。Router組件本身只是一個容器,真正的路由要通過Route組件定義,Route組件定義了URL路徑和組件之間的對應關系,你可以同時使用多個Route組件。
舉個簡單的小栗子
用戶訪問/repos(比如http://localhost:8080/#/repos)時,加載Repos組件;訪問/about(http://localhost:8080/#/about)時,加載About組件。
React-Router入門