react-router使用教程

booder發表於2019-02-16
React

react-router使用教程

  1. 關於url中#的作用:

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

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

    • 改變#不觸發網頁過載

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

    • window.location.hash讀取#值

    • window.onhashchange = func 監聽hash改變

  2. reat-router

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

相關文章