React Web:使用Router实现页面跳转、传参

###React Web:使用Router实现页面跳转、传参

####1.效果展示

####2 . npm导入react-router并添加依赖
（shift+右键项目根目录，打开命令行输入以下内容）

npm install react-router --save-dev

####3.新建两个子页面
Red.js

import ReactDOM,{render} from 'react-dom'

export default class Red extends Component{
  render(){
    return 
Red
  }
}

####4.Router实现
Index.js

import React,{Component} from 'react'
import ReactDOM,{render} from 'react-dom'
import { Router, Route, hashHistory,Link } from 'react-router';

import Red from './Red'
import Blue from './Blue'

class MyApp extends Component{
  render(){
    return(
      

        
This is index(MyApp)
        
toRed
        
toBlue
      
    );
  }
}

render((
  
    
    
    
  
), document.getElementById('app'));

6.添加标签

react的标签在浏览器上会被渲染为标签

toRed

7.传参

在Router内新增一句(id即是要传的参数名)

同样对“toBlue”加上标签，区别是多了一斜杠和传递值，然后包裹上大括号，

toBlue

8.接受参数

Blue.js

import ReactDOM,{render} from 'react-dom'

export default class Blue extends Component{
  constructor(props){
    super(props);
  }
  render(){
    return 
Blue:id:{this.props.params.id}
  };
}