import React from 'react';

// 首先我们需要导入一些组件... （这个是中文网示例，按这个做，报一大堆错误，刚学习摸不着头脑） import { Router, Route, Link } from 'react-router'

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

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>)

  }

}

// 使用react-router

class App extends React.Component {

  render() {

    return (<div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <h3>用于构建用户界面的JavaScript库</h3>

      </header>

      <div>

        <Router>

          <div>

            <ul>

              <li>

                <Link to="/">Home</Link>

              </li>

              <li>

                <Link to="/about">About</Link>

              </li>

              <li>

                <Link to="/inbox">Inbox</Link>

              </li>

            </ul>

            <div>

              <Route exact path="/" component={Home} />

              <Route path="/about" component={About} />

              <Route path="/inbox" component={Inbox} />

            </div>

          </div>

        </Router>

      </div>

    </div>)

  }

}

export default App;