Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="main"></div>
  <script src="https://fb.me/react-15.1.0.js"></script>
  <script src="https://fb.me/react-dom-15.1.0.js"></script>
  <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
  <script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
</body>
</html>
 
const Router = ReactRouterDOM.BrowserRouter;
const Route = ReactRouterDOM.Route;
const Link = ReactRouterDOM.Link;
const PropTypes = React.PropTypes;
class App extends React.Component {
  constructor() {
    super(...arguments);
  }
  
  render() {
    const home = () => (<div>Home</div>);
    const about = () => (<div>About</div>);
    const { history } = this.props;
  
    return (
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
          
        <Route exact path="/" component={home} />
        <Route path="/about" component={about} />
      </div>
    )
  }
}
const AppWithRouter = ReactRouterDOM.withRouter(App);
ReactDOM.render(
  <Router>
    <AppWithRouter />
  </Router>,
  document.getElementById('main')
);
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers