③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.记住一个原则： 像这种通配符的匹配，写在最底部，防止出现以下情况:
 *       <Router>
 <Route path="/:userName/:id" component={UserPage}/>
 <Route path="/about/me" component={About}/>
 </Router>

 上面代码中，用户访问/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 <div>
            这个路由匹配是： 可选匹配 <br />
            接受参数name:{this.props.params.name}
        </div>;
    }
}

/**
 * 指定参数个数时的匹配
 * @returns {XML}
 * @constructor
 */
const List = ()=> {
    return <div>
        <ul>
            <li><Link to="/List/test01/react">react</Link></li>
            <li><Link to="/List/test02/vue">vue</Link></li>
        </ul>
    </div>;
}

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

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

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


class Greed extends React.Component {

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

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

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 (
            <div>
                React Router 常用操作：
                <ul>
                    <li><IndexLink to="/" activeClassName="active" component={Home}>通过IndexLink返回首页</IndexLink></li>
                    <li><Link onlyActiveOnIndex activeClassName="active" to="/">通过onlyActiveOnIndex返回首页</Link></li>
                </ul>

                <ul>
                    <li><Link activeClassName="active" to="About">About不带参数访问</Link></li>
                    <li><Link activeClassName="active" to="/About/loycoder">About携带参数</Link></li>
                </ul>

                <ul>
                    <li><Link activeClassName="active" to="/List">list 多层路由规则指向</Link></li>
                </ul>

                <ul>
                    <li><Link activeClassName="active" to="/renyi/index.php">指定后缀的，任意字符匹配-模式1</Link></li>
                    <li><Link activeClassName="active" to="/renyi/index.html">指定后缀的，任意字符匹配-模式2</Link></li>
                </ul>

                <ul>
                    <li><Link activeClassName="active" to="/greed/参数1/参数2/参数N/1.jpg">贪婪模式匹配，【在不确定参数个数的情况下使用】</Link></li>
                </ul>

                <ul>
                    <li><Link activeClassName="active" to="/redirect">路由跳转</Link></li>
                </ul>

                <hr />
                <ul>
                    <li>路由钩子的使用</li>
                    <li><Link to="/Auth">点击进入会员中心。【当前假设未登录】</Link></li>
                </ul>

                {this.props.children}

                <hr />
                <p>表单处理，提交参数</p>
                <form onSubmit={this.handleSubmit.bind(this)}>
                    <ul>
                        <li>姓名:<input ref="name" type="text"/></li>
                        <li>职业:<input ref="job" type="text"/></li>
                        <li><input type="submit" value="submit"/></li>
                    </ul>
                </form>
            </div>
        );
    }
}

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

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={APP}>
            <IndexRoute component={Home}/>

            <Redirect from="/redirect" to="/About/我是跳转携带的参数"/>

            <Route path="/List" component={List}></Route>

            <Route path="/List/:myName/:myArgs" component={ListChild}></Route>

            <Route path="About(/:name)" component={About}/>

            <Route path="renyi/*.*" component={File}/>

            <Route path="/greed/**/*.jpg" component={Greed}/>

            {/*当用户进入路由，和离开路由的验证*/}
            <Route path="/Auth" onEnter={onEnter} onLeave={onLeave}  component={MemberCenter}></Route>
        </Route>
    </Router>,
    document.getElementById('app')
);