react-router使用教程

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