ReactJS Router

在本章中，我們將學(xué)習(xí)如何為應(yīng)用設(shè)置路由。

第1步-安裝React路由器

一種簡單的安裝方法react-router是在command prompt窗口中運行以下代碼段。

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

第2步-創(chuàng)建組件

在這一步中，我們將創(chuàng)建四個組件。該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步-添加路由器

現(xiàn)在，我們將路由添加到應(yīng)用程序。這次將呈現(xiàn)，而不是App像上一個示例中那樣呈現(xiàn)元素Router。我們還將為每個路線設(shè)置組件。

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

當(dāng)應(yīng)用程序啟動時，我們將看到三個可點擊鏈接，可以用來更改路由。