понедельник, 29 августа 2016 г.

Simple React Router My CheatSheet

// Simple React Router

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    constructor (props) {
        super(props);
        this.state = {
            route: window.location.hash.substr(1)
        };
    }
    render () {
        let Page;
        switch (this.state.route) {
            case '/page-1': Page = <p>Содержимое страницы 1</p>; break;
            case '/page-2': Page = <p>Содержимое страницы 2</p>; break;
            case '/page-3': Page = <p>Содержимое страницы 3</p>; break;
            default: Page = <p>Содержимое страницы 1</p>;
        }
        return (
            <div id="main-menu">
                <ul>
                    <li style={{display: 'inline-block'}}><a href="#/page-1">Страница 1</a></li>{' '}
                    <li style={{display: 'inline-block'}}><a href="#/page-2">Страница 2</a></li>{' '}
                    <li style={{display: 'inline-block'}}><a href="#/page-3">Страница 3</a></li>
                </ul>
                {Page}
            </div>
        );
    }
    componentDidMount () {
        window.addEventListener('hashchange', () => {
            this.setState({route: window.location.hash.substr(1)});
        });
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

Комментариев нет:

Отправить комментарий