React-Router学习笔记

概述

传统开发中的 路由，是由服务端根据不同的用户请求地址 URL，返回不同内容的页面，而前端路由则将这些任务通过 JS 在浏览器端完成，SPA 应用(单页面应用) 则是前端路由的最佳适用场景，因为它结构简单，只需更新页面部分显示内容 也不必每次都从服务端获取内容。

**react-router **是官方指定和维护的 React 路由库，它通过管理 URL，实现组件间切换和状态 (state) 的变化。

官方示例教程，分为三章：

• React-Router 中文简明教程（上）
• React-Router 中文简明教程（中）
• React-Router 中文简明教程（下）

概念图

React-Router.jpg

应用

• 基本用法

App.js

import React, {Component} from "react";
import {Link} from 'react-router';
class App extends Component {

    render() {
        return (
            <div>
                <h1>App</h1>
                <ul>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/inbox">Inbox</Link></li>
                </ul>
                {this.props.children}
            </div>

        )
    }
}

main.js

 <Router history={hashHistory}>
      <Route path="/" component={App} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox} />
  </Router>

history属性，一共有三种取值:

• browserHistory
  路由将通过URL的hash部分（#）切换，
  例如:example.com/some/path
• hashHistory
  显示正常的路径，例如：example.com/#/some/path
• createMemoryHistory
  主要用于服务器渲染。它创建一个内存中的history对象，不与浏览器URL互动

注意：

• 一般项目中的history值采用browserHistory

• path属性指定路由的匹配规则,path可以表示相对路径，也可以表示绝对路径，一般多采用绝对路径

• 路由嵌套

main.js

<Router history={browserHistory}>
        <Route path="/" component={App}/>
        <Route path="/about" component={About}/>
        <Route path="/inbox" component={Inbox} />
            <Route path="message" component={Message}/>
            <Route path="redirect" component={RedirectPage}/>
        </Route>
    </Router>

用户访问/message时，会先加载Inbox组件，然后在Inbox组件内部再加载Message组件

• IndexRoute组件

main.js

 <Router history={browserHistory}>
        <Route path="/" component={App}/>
        <IndexRoute components={Home}/>
        <Route path="/about" component={About}/>
        <Route path="/inbox" component={Inbox}>
            <Route path="message" component={Message}/>
            <Route path="redirect" component={RedirectPage}/>
        </Route>
    </Router>

显式指定默认情况下加载的子组件
注意：IndexRoute没有路径参数path

• 路由跳转

Link组件用于取代<a>元素，生成一个链接，允许用户点击后跳转到另一个路由
app.js

import React, {Component} from "react";
import {Link} from 'react-router';
class App extends Component {
    render() {
        return (
            <div>
                <h1>App</h1>
                <ul>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/inbox">Inbox</Link></li>
                </ul>
                {this.props.children}
            </div>
        )
    }
}

Link组件用于正常的用户点击跳转，browserHistory.push则用来处理表单跳转、点击按钮跳转等操作
inbox.js

class Inbox extends Component {
    Logout(){
        browserHistory.push('/');    //该方法可用于表单跳转和点击按钮跳转
    }

    render() {
        return (
            <div>
                <h2>Inbox</h2>
                {this.props.children || "Welcome to your Inbox"}
                <ul>
                    <li><Link to="/">App</Link></li>
                    <li><Link to="/inbox/message">Message</Link></li>
                </ul>
                {this.props.children}
                <button onClick={this.Logout.bind(this)}>退出</button>
            </div>
        )
    }
}

• 路由重定向

<Redirect>组件用于路由的跳转，即用户访问一个路由，会自动跳转到另一个路由

<Router history={browserHistory}>
        <Route path="/" component={App}/>
        <IndexRoute components={Home}/>
        <Route path="/about" component={About}/>
        <Route path="/inbox" component={Inbox}>
            <Redirect from="/inbox/message" to="/about"/>  //绝对路径
            <Route path="message" component={Message}/> //相对路径
            <Route path="redirect" component={RedirectPage}/>
        </Route>
    </Router>

源码点击这里

---

参考资料：
http://www.mrfront.com/2016/12/11/react-router-tutorial-part1/
https://cnodejs.org/topic/573f2756fcf698421d20371f
http://www.voidcn.com/blog/z5fn1v13/article/p-6387484.html