react-router路由

一、安装

npm install --save react-router

安装后使用一个支持CommonJS或ES2015的模块管理，比如 webpack ：

npm install webpack  或   cnpm install webpack

npm  i  - g webpack webpack -dev - server  或   cnpm  i  - g webpack webpack -dev - server

安装react   npm install react   或    cnpm i react

安装react-dom    npm install react-dom    或  cnpm i react-dom

再安装package.json中的开发配置项，nam install   或  cnpm install

最后终端  nam start  运行配置脚本命令

参见react-router中文手册  http://react-guide.github.io/react-router-cn/docs/Introduction.html

使用例子参见github上的例子  https://github.com/GitHub-Larry/react-router-tutorial

在react中一个路由对应一个组件

使用前需要在项目目录下 npm install  下载package.json中的开发依赖

1、demo1 路由渲染

index.js

import React  from  'react'
import { render }  from  'react-dom'
import { Router, Route, hashHistory }  from  'react-router'

//导入我们自己写的模块组件
import App  from  './modules/App'
import About  from  './modules/About'
import Repos  from  './modules/Repos'

render((
    < Router  history ={hashHistory}>
        /*根路径对应App组件*/
        < Route  path ="/"  component ={App}/>
       
        { /* add the routes here */}

        /* /repos路径对应Repos组件*/
        < Route  path ="/repos"  component ={Repos}/>
        /* /About路径对应About组件*/
        < Route  path ="/about"  component ={About}/>
    </ Router>
), document. getElementById( 'app'));

App组件

import React  from  'react'

export default React.createClass({
  render() {
    return < div> Hello, React Router!</ div>
  }
})

Repos组件

import React  from  'react'

export default React.createClass({
    render() {
        return < div> Repos</ div>
    }
})

About组件

import React  from  'react'

export default React.createClass({
    render() {
        return < div> About</ div>
    }
})

webpack.config.js配置文件

module. exports  = {
  entry :  './index.js',

  output : {
    filename :  'bundle.js',
    publicPath :  ''
  },

  module : {
    loaders : [
      { test :  /\.js$/, exclude :  /node_modules/, loader :  'babel-loader?presets[]=es2015&presets[]=react' }
    ]
  }
}

2、demo2 通过链接来导航

‘link’和a类似，只不过link能感知到路由

index.js

import React  from  'react'
import { render }  from  'react-dom'
import { Router, Route, hashHistory }  from  'react-router'

import App  from  './modules/App'
import About  from  './modules/About'
import Repos  from  './modules/Repos'

render((
  < Router  history ={hashHistory}>
    < Route  path ="/"  component ={App}/>
    < Route  path ="/repos"  component ={Repos}/>
    < Route  path ="/about"  component ={About}/>
  </ Router>
), document. getElementById( 'app'));

App组件

import React  from  'react'
import { Link }  from  'react-router'

export default React.createClass({
  render() {
    return (
        < div>
          < h1> React Router Tutorial</ h1>
          < ul  role ="nav">
            < li>< Link  to ="/about"> About</ Link></ li>
            < li>< Link  to ="/repos"> Repos</ Link></ li>
          </ ul>
        </ div>
    )
  }
})

Repos组件

import React  from  'react'

export default React.createClass({
  render() {
    return < div> Repos</ div>
  }
})

About组件

import React  from  'react'

export default React.createClass({
  render() {
    return < div> About</ div>
  }
})

3、内嵌路由

index.js

import React  from  'react'
import { render }  from  'react-dom'
import { Router, Route, hashHistory }  from  'react-router'

import App  from  './modules/App'
import About  from  './modules/About'
import Repos  from  './modules/Repos'

render((
  < Router  history ={hashHistory}>
    < Route  path ="/"  component ={App}>
        /* 把它们嵌套在App组件中,使其变成组件App的孩子 */
        < Route  path ="/repos"  component ={Repos}/>
        < Route  path ="/about"  component ={About}/>
    </ Route>
   
  </ Router>
), document. getElementById( 'app'));

App组件

import React  from  'react'
import { Link }  from  'react-router'

export default React. createClass({
  render() {
    return (
      < div>
        < h1> React Router Tutorial</ h1>
        < ul  role ="nav">
          < li>< Link  to ="/about"> About</ Link></ li>
          < li>< Link  to ="/repos"> Repos</ Link></ li>
        </ ul>
          { this.props.children}
      </ div>
    )
  }
})

Repos组件

import React  from  'react'

export default React. createClass({
  render() {
    return < div> Repos</ div>
  }
})

About组件

import React  from  'react'

export default React. createClass({
  render() {
    return < div> About</ div>
  }
})