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.添加
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}
};
}