react路由使用(二)

上篇文章介绍了路由安装基本使用,今天继续来看路由的跳转。

路由的跳转有两种基本方式，一种是通过标签的形式跳转，一种是函数式跳转，这个跟vue是很相似的。

1.通过标签的形式跳转：

import {Link,NavLink} from 'react-router-dom'     // 这边导入进行跳转的标签
const Home = () =>{
   return(
     <div>
        <Link to='/about'>点击进行跳转</Link>
        <NavLink to='/mine'>点击进行跳转</NavLink>
     </div>
   )
}
export default Home

Link和NavLink都可以达到跳转的作用，其含有的属性也是一样的，但是有一点，在使用NavLink标签的时候我们点击跳转会有高亮的效果，这个其实是NavLink会在带一个类名叫做active并且我们可以通过ActiveClassName对这个类名作自定义设置，以达到我们想要的高亮颜色效果。 两者的原理其实都是相当于a标签的跳转。

2.函数式跳转：

import React from 'raect'
export default class Home extends React.Component{
   clickHandle = () =>{
      this.props.history.push('/about')   // 通过路由属性history里push()方法进行跳转
      this.props.history.replace('/about') // 依然可以跳转但和push()方法存在差异
   }  
   render(){
     return(
       <div>
          <button onClick={this.clickHandle}>点击跳转</button>
       </div>
     )
   }
}

这种函数式跳转类似vue中this.$router.push()，在这里我们看到push()和replace()都可以进行路由跳转，两者的区别是 push()方法会记录历史，是在跳转前页面上的叠加，而replace()方法则会覆盖掉跳转前的页面不会记录历史。

注意：在使用函数式跳转或者叫编程式跳转方式的时候，当前用作跳转的组件必须是由路由直接管理的组件，不然我们在props中则无法读取到路由属性参数（history location match）更不用说history里的push()方法了。

那么，如果真的遇到这种没有直接被路由管理而且我们也希望使用这种跳转的时候是不是没办法呢？答案是NO ！React跟我们提供了一种方法，就是利用withRouter那么怎么做呢，我们来看。

withRouter 的使用：

import React,{withRouter} from 'raect'  // 引入进来
class Home extends React.Component{
   clickHandle = () =>{
      this.props.history.push('/about')   
      this.props.history.replace('/about') 
   }  
   render(){
     return(
       <div>
          <button onClick={this.clickHandle}>点击跳转</button>
       </div>
     )
   }
}
export default withRouter(Home)  // 高阶组件的方式 导出当前组件

从上面我们不难看到，withRouter是React自带的，我们直接引入即可使用，因为withRouter是一个高阶组件，所以我们要采取如上的方式导出当前组件。

可以说就变动了两行代码，就可以使我们没有被路由直接管理的组件同样在props中读取到路由属性及参数，从而正常使用函数式路由跳转，很方便有木有~~

那路由的跳转，就说到这~~