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