react-router使用教程

1. 關於url中#的作用:

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

   • `#`代表網頁中的一個位置。其右面的字元，就是該位置的識別符號

   • 改變#不觸發網頁過載

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

   • window.location.hash讀取#值

   • window.onhashchange = func 監聽hash改變

2. reat-router

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

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

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

3. 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

     • 子路由元件: 子<Route>配置的元件

   • IndexRoute: 預設路由

     • 當父路由被請求時, 預設就會請求此路由元件

   • hashHistory

     • 用於Router元件的history屬性

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

   • Link: 路由連結

     • 屬性1: to=”/xxx”

     • 屬性2: activeClassName=”active”

4. 下載相關外掛：

   • npm install react-router@3 –save

5. 編碼

   • 定義各個路由元件

     • About.js

       import React from `react`
       function About() {
         return <div>About元件內容</div>
       }
       export default About

     • Home.js

       import React from `react`
       function Home() {
         return <div>Home元件內容2</div>
       }
       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 (
                   <div>
                       <h3>Repos 元件</h3>
                       <ul>
                           {
                               this.state.repos.map((item, index) => {
                                   return <li key={index}><Link to={`/repos/${item.name}/${item.repo}`}>{item.repo}</Link></li>
                               })
                           }
                       </ul>
                       {this.props.children}
                   </div>
               )
           }
       }

   • 定義應用元件: App.js

     import React from `react`;
     import {Link} from `react-router`
     
     class App extends React.Component{
         render(){
             return (
                 <div>
                     <h2>Hello, React Router!</h2>
                     <ul>
                         <li><Link to="/about">about</Link></li>
                         <li><Link to="/repos">repos</Link></li>
                     </ul>
                     {this.props.children}
                 </div>
             )
         }
     }
     
     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(
         (
             <Router history={hashHistory}>
     
                 <Route path="/" component={App}>
     
                     <IndexRoute component={Home}></IndexRoute>
                     <Router path="/about" component={About}></Router>
                     <Router path="/repos" component={Repos}>
                         <Route path="/repos/:name/:repo" component={Repo}></Route>
                     </Router>
                 </Route>
             </Router>
         ),
         document.getElementById(`root`)
     );

   • 主頁面: index.html

     <style>
       .active {
         color: red;
       }
     </style>
     <div id=`root`></div>

6. 傳遞請求引數

   • repo.js: repos元件下的分路由元件

     import React from `react`;
      
      function Repo({params}) {
          return <p>使用者名稱:{params.name}, 倉庫名:{params.repo}</p>
      }
      
      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 (
                 <div>
                     <h3>Repos 元件</h3>
                     <ul>
                         {
                             this.state.repos.map((item, index) => {
                                 return <li key={index}><Link to={`/repos/${item.name}/${item.repo}`}>{item.repo}</Link></li>
                             })
                         }
                     </ul>
                     {this.props.children}
                 </div>
             )
         }
     }