React教程16:React Router
这一章教程将向你讲解如何设置React Router,
第1步 – 安装 React Router
在命令行中通过npm安装 react-router 。
C:\Users\username\Desktop\reactApp>npm install react-router
第2步 – 创建Components
这一步,我们创建4个components。 App component 会用在tab菜单上。其他3个components (Home), (About) 和 (Contact) 在route改变时候对应地render在页面上。
main.js
import React from 'react'; import ReactDOM from 'react-dom'; import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router' class App extends React.Component { render() { return ( <div> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> {this.props.children} </div> ) } } export default App; class Home extends React.Component { render() { return ( <div> <h1>Home...</h1> </div> ) } } export default Home; class About extends React.Component { render() { return ( <div> <h1>About...</h1> </div> ) } } export default About; class Contact extends React.Component { render() { return ( <div> <h1>Contact...</h1> </div> ) } } export default Contact;
第3步 – 添加Router
这一步我们添加router。让 Router 能够被render出来。每一个components 对应不同的 route。
main.js
ReactDOM.render(( <Router history = {browserHistory}> <Route path = "/" component = {App}> <IndexRoute component = {Home} /> <Route path = "home" component = {Home} /> <Route path = "about" component = {About} /> <Route path = "contact" component = {Contact} /> </Route> </Router> ), document.getElementById('app')) app启动时候,我们可以看到3个链接,点击后显示相应route页面。