在本章中,我们将学习如何为应用设置路由.
简单安装 react-router 的方法是在命令提示符窗口中运行以下代码片段.
C:\Users\username\Desktop\reactApp>npm install react-router
在这一步中,我们将创建四个组件. App 组件将用作标签菜单.路线更改后,将呈现其他三个组件(主页),(关于)和(联系人).
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;
现在,我们将向应用添加路由.而不是像上一个示例中那样渲染 App 元素,这次将呈现路由器.我们还将为每条路线设置组件.
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'))
当应用程序启动时,我们将看到三个可用于更改路径的可点击链接.