③React-router的常用操作

以下代码，React-router 是 2.x 版，本文的内容只适合这个版本，与最新的 4.x 版不兼容。目前，官方同时维护 2.x 和 4.x 两个版本，所以前者依然可以用在项目中。

效果图：

image.png

import React from 'react';
import ReactDOM from 'react-dom';
import  {Router,Route,hashHistory,browserHistory,Link,IndexRoute,Redirect,IndexLink } from 'react-router';

require('./style.css');

/**
 *  本节知识点：
 *   路由的通配符匹配：
 *      1.路由匹配规则是从上到下执行，一旦发现匹配，就不再其余的规则了。
 *      2.()是可选匹配
 *      3.*是任意字符匹配
 *      4.**贪婪模式，在不确定参数个数的情况下匹配
 *
 *      5.记住一个原则： 像这种通配符的匹配，写在最底部，防止出现以下情况:
 *       
 
 
 

 上面代码中，用户访问/about/me时，不会触发第二个路由规则，
 因为它会匹配/:userName/:id这个规则。因此，带参数的路径一般要写在路由规则的底部。

 其他知识点：
 1.关于Link  组件的 activeClassName 属性与 activeStyle
 是指定 如果是访问了当前的  路由,就指定 class样式， activeStyle 是内联样式

 2.关于IndexRoute 组件。 当用户访问 / 的时候显示， 注意：
 IndexRoute 没有 path 属性

 3.在Router组件之外，导航到路由页面，可以使用浏览器的History API，像下面这样写。
 browserHistory.push('/some/path');

 4.关于 IndexLink 和 onlyActiveOnIndex 属性
 IndexLink其实就是   onlyActiveOnIndex 的包装而已， 2者的效果是一样的

 因为/会匹配任何子路由。而IndexLink组件会使用路径的精确匹配。
 如果链接到根路由/，不要使用Link组件，而要使用IndexLink组件。
 这是因为对于根路由来说，activeStyle和activeClassName会失效，或者说总是生效，

 5.关于 history属性，一共有3个属性，分别是：

 1.browserHistory
 如果设为browserHistory，浏览器的路由就不再通过Hash完成了，而显示正常的路径example.com/some/path，
 背后调用的是浏览器的History API。

 2.hashHistory
 如果设为hashHistory，路由将通过URL的hash部分（#）切换，URL的形式类似example.com/#/some/path。

 3.createMemoryHistory
 createMemoryHistory主要用于服务器渲染。它创建一个内存中的history对象，不与浏览器URL互动.
 const history = createMemoryHistory(location)
 */


//browserHistory.push('/List');

/**
 * 可选参数的匹配x
 */
class About extends React.Component {
    render() {
        return 

            这个路由匹配是： 可选匹配 

            接受参数name:{this.props.params.name}
        
;
    }
}

/**
 * 指定参数个数时的匹配
 * @returns {XML}
 * @constructor
 */
const List = ()=> {
    return 

        

            
react
            
vue
        
    
;
}

class ListChild extends React.Component {
    render() {
        return 
{this.props.params.myArgs}
;
    }
}

/**
 * 匹配 *.*的路由
 */
class File extends React.Component {

    render() {
        //如果是 这种*号匹配，取值应该这样取：
        var args = this.props.params.splat;
        return 
{args.join(".")}
;
    }
}


class Greed extends React.Component {

    render() {
        //如果是 这种** 贪婪批量，取值应该这样取：
        var args = this.props.params.splat;
        return 
{args.join(".")}
;
    }
}
/**
 * 默认访问
 */
class Home extends React.Component {
    render() {
        return 
直接通过域名访问显示的页面..
;
    }
}

/**
 * 路由钩子案例
 */
class MemberCenter extends React.Component {
    render() {
        return 
您已进入会员中心..
;
    }
}

class APP extends React.Component {

    handleSubmit(event) {
        event.preventDefault();
        //console.log(event.target.elements);

        const name = this.refs.name.value;
        const job = this.refs.job.value;

        const path = `/greed/${name}/${job}.jpg`;
        browserHistory.push(path);

        // this.context.router.push(path)
    }

    render() {
        return (
            

                React Router 常用操作：
                

                    
通过IndexLink返回首页
                    
通过onlyActiveOnIndex返回首页
                

                

                    
About不带参数访问
                    
About携带参数
                

                

                    
list 多层路由规则指向
                

                

                    
指定后缀的，任意字符匹配-模式1
                    
指定后缀的，任意字符匹配-模式2
                

                

                    
贪婪模式匹配，【在不确定参数个数的情况下使用】
                

                

                    
路由跳转
                

                

                

                    
路由钩子的使用
                    
点击进入会员中心。【当前假设未登录】
                

                {this.props.children}

                

                
表单处理，提交参数
                

                    

                        
姓名:
                        
职业:
                        

                    
                
            
        );
    }
}

/**
 * 进入路由的验证
 */
const onEnter = (nextState, replace) => {
    if (1 == 2) {  //假设未登录
        alert('您没有登录，将跳转到首页');
        replace({pathname: '/'})
    }
}
const  onLeave=(nextState, replace) => {
    alert('即将要离开');
    return false;
}

ReactDOM.render(
    
        
            

            

            

            

            

            

            

            {/*当用户进入路由，和离开路由的验证*/}
            
        
    ,
    document.getElementById('app')
);