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

下面这种方法,首先要增加静态变量,里面进行路由的一些配置。然后直接通过.router.push进行调用。其他两个文件与上面的一样,不加修改。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值