react.js从入门到精通（六）——路由的使用
对路由的理解
在pc端页面之间的切换，我们大多使用a链接、location等操作。
在react.js开发中，我们采用组件化操作，一个页面就是一个组件。所以页面和页面之间的跳转就相当于是组件和组件之间的跳转。
我们知道react.js是一种单页面项目开发，就是在一个主页面的基础上存放各种子页面。这就好像一根网线连接路由器，而路由器能分出很多根网线连接大量的电脑。所以我们将单页面项目的页面跳转称为路由。
在第一篇放出的框架中，我们介绍过专门用来管理路由的文件——routes.js文件。
1、使用Link进行路由跳转
（1）routes.js中的配置
import React from 'react'
import { Route, IndexRoute } from 'react-router'
import MyScreen from './containers/MyScreen';
import {
App,
Home,
} from './containers'
export default (
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="my">
<IndexRoute component={MyScreen}/>
</Route>
</Route>
);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
注意：这里需要使用react-router功能模块，一般都是框架中自带的，如果没有可使用npm进行下载使用（第一篇分享的框架的package.json中已经囊括了常用的功能资源）。
（2）Home.js中的代码
import React,{ Component } from 'react'
import MyScreen from "./MyScreen";
import { Link } from 'react-router'
class Home extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div style={{width:"100%",height:"300px",fontSize:"20px"}}>
<Link to="/my">
<div id="div1" style={{width:"100%",height:"100px",backgroundColor:"#ff0",lineHeight:"100px",textAlign:"center"}}>点击跳转</div>
</Link>
</div>
)
}
}
export default Home- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
（3）MyScreen.js中的代码：
import React,{ Component } from 'react'
class MyScreen extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div style={{width:"100%",height:document.documentElement.clientHeight,fontSize:"12px",backgroundColor:"#0ff",textAlign:"center",lineHeight:"100px"}} onClick={()=>this.click()}>
这是MyScreen界面
</div>
)
}
click=()=>{
alert("点击到了！！！！");
};
}
export default MyScreen- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
2、使用push的方式进行路由跳转
这一种相对于Link方法更加常用。
Home.js代码
import React,{ Component } from 'react'
import MyScreen from "./MyScreen";
import { Link } from 'react-router'
class Home extends Component {
static contextTypes = {
router: React.PropTypes.object
};
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div style={{width:"100%",height:"300px",fontSize:"20px"}}>
<div id="div1" style={{width:"100%",height:"100px",backgroundColor:"#ff0",lineHeight:"100px",textAlign:"center"}} onClick={()=>this.click()}>点击跳转</div>
</div>
)
}
click=()=>{
this.context.router.push("/my");
};
}
export default Home- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
