// 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'));
Комментариев нет:
Отправить комментарий