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 (
            

                
App
                

                    
About
                    
Inbox
                
                {this.props.children}
            

        )
    }
}

main.js

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

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

注意：

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

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

• 路由嵌套

main.js

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

• IndexRoute组件

main.js

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

• 路由跳转

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

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

                
App
                

                    
About
                    
Inbox
                
                {this.props.children}
            
        )
    }
}

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

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

    render() {
        return (
            

                
Inbox
                {this.props.children || "Welcome to your Inbox"}
                

                    
App
                    
Message
                
                {this.props.children}
                退出
            
        )
    }
}

• 路由重定向

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

        
        
        
        
              //绝对路径
             //相对路径
            
        
    

源码点击这里

---

参考资料：
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