Full React Router My CheatSheet

// Full React Router

import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, IndexRoute, IndexRedirect, withRouter, hashHistory, Link} from 'react-router';

class NavLink extends Component {
    render () {
        // onlyActiveOnIndex={false} - ссылка всегда выделена при переходе на дочерние адреса
        // onlyActiveOnIndex={true} - с сылки снимается выделение при переходе на дочерине адреса
        return (
            <Link to={this.props.to} onlyActiveOnIndex={this.props.onlyActiveOnIndex} activeClassName="active">{this.props.children}</Link>
        );
    }
}

class App extends Component {
    render () {
        return (
            <div id="main-menu">
                <style>{'.active {font-weight: bold;}'}</style>
                <ul>
                    <li style={{display: 'inline-block'}}><Link to="/page-1" activeClassName="active" onlyActiveOnIndex={true}>Страница 1</Link></li>{' '}
                    <li style={{display: 'inline-block'}}><Link to="/page-2" activeClassName="active" onlyActiveOnIndex={true}>Страница 2</Link></li>{' '}
                    <li style={{display: 'inline-block'}}><NavLink to="/page-3" onlyActiveOnIndex={true}>Страница 3</NavLink></li>
                    <li style={{display: 'inline-block'}}><NavLink to="/form" onlyActiveOnIndex={true}>Форма</NavLink></li>
                </ul>
                {this.props.children}
            </div>
        );
    }
}

class Page1 extends Component {render () {return (<p>Содержимое страницы 1</p>);}}

class Page2 extends Component {
    constructor (props) {
        super(props);
    }
    render () {
        return (<p>Содержимое страницы 2</p>);
    }
    componentDidMount () {
        this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave)
    }
    routerWillLeave() {
        let answer = window.confirm('Вы уверены?');
        if (!answer) {return false;}
    }
}

Page2 = withRouter(Page2);

class Page3 extends Component {
    render () {
        return (
            <div>
                <p>Содержимое страницы 3</p>
                <ul>
                    <li style={{display: 'inline-block'}}><Link to="/page-3/section-1/text_for_section_1">Раздел 1</Link></li>{' '}
                    <li style={{display: 'inline-block'}}><Link to="/page-3/section-2/text_for_section_2">Раздел 2</Link></li>
                </ul>
                {this.props.children}
            </div>
        );
    }
}

class Page3Section1 extends Component {render () {return (<p>Секция 1: {this.props.params.text}</p>);}}

class Page3Section2 extends Component {
    render () {
        if (this.props.params.text.replace(/_/g, ' ') === 'text for section 2') {
            return (<p>Секция 2: {this.props.params.text}</p>);
        } else {
            return (<p>Секция 2: текст по умолчанию</p>);
        }
    }
}

class Form extends Component {
    render () {
        return (
            <form onSubmit={this.handleSubmit.bind(this)}>
                <input ref="inp" type="text" value="text_for_section_1" onChange={this.handleOnChange.bind(this)} />
                <input type="submit" value="Отправить" />
            </form>
        );
    }
    handleSubmit (event) {
        event.preventDefault();
        this.context.router.push(`/page-3/section-1/${this.refs.inp.value}`); // Redirect
    }
    handleOnChange () {}
}

Form.contextTypes = {
    router: PropTypes.object.isRequired
};

class NotFound extends Component {render () {return (<p>Страница не найдена. <Link to="/page-1">Вернуться на главную.</Link></p>);}}

function sayGoodbye () {console.log('Goodbye');}
Page2.sayHello = function () {console.log('Hello');}

let routes = (
    <div>
          {/* полностью перерисовать компонент App и всё его содержимое при абсолютно любом переходе */}
          <Route path="/" component={App}>
              {/*<IndexRoute component={Page1} />*/}
              <IndexRedirect to="page-2" />
              <Route path="page-1" component={Page1} onLeave={sayGoodbye} />
              <Route path="page-2" component={Page2} onEnter={Page2.sayHello} />
              <Route path="page-3" component={Page3}>
                  <Route path="section-1/:text" component={Page3Section1} />
                  <Route path="section-2/:text" component={Page3Section2} />
              </Route>
              <Route path="form" component={Form} />
          </Route>
          <Route path='*' component={NotFound} />
    </div>
);

ReactDOM.render(<Router history={hashHistory} routes={routes} />, document.getElementById('root'));