react路由初探（1）

import React from 'react';
import logo from './logo.svg';
import './App.css';

class About extends React.Component {
  render() {
    return (<div>
      <h1>About</h1>
    </div>)
  }
}
class Inbox extends React.Component {
  render() {
    return (<div>
      <h1>Inbox</h1>
    </div>)
  }
}

class Home extends React.Component {
  render() {
    return (<div>
       <h1>Home</h1>
    </div>)
  }
}

class App extends React.Component {
  constructor() {
    super()
    this.state = { route: '' }
  }
  componentDidMount() {
    window.addEventListener('hashchange', () => {
      this.setState({
        route: window.location.hash.substr(1)
      })
    })
  }
  render() {
    let Child
    switch (this.state.route) {
      case '/about': Child = About; break;
      case '/inbox': Child = Inbox; break;
      default: Child = Home;
    }
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h3>用于构建用户界面的JavaScript库</h3>
          <p>
            <a href="#/home"><button>home</button></a>
            <a href="#/about"><button>about</button></a>
            <a href="#/inbox"><button>inbox</button></a>
          </p>
        </header>
        <div className="container">
          <Child />
        </div>
      </div>
    );
  }
}

export default App;

这个是react路由中文网的第一个示例不使用React Router