ReactJS Router

在本章中，我们将学习如何为应用设置路由。

第1步-安装React路由器

一种简单的安装方法react-router是在command prompt窗口中运行以下代码段。

C：\ Users \用户名\ Desktop \ reactApp> npm install react-router

第2步-创建组件

在这一步中，我们将创建四个组件。该App组件将用作选项卡菜单。路线更改后(Home), (About)，(Contact)将渲染其他三个组件。

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步-添加路由器

现在，我们将路由添加到应用程序。这次将呈现，而不是App像上一个示例中那样呈现元素Router。我们还将为每个路线设置组件。

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

当应用程序启动时，我们将看到三个可点击链接，可以用来更改路由。