react-router简单整理总结

一、react-router与react-router-dom区别

• react-router: 实现了路由的核心功能
• react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。

从源码可以看出react-router-dom是依赖于react-router的，其中Switch、Route、Router、Redirect等组件是直接引入react-router中的

export { Switch, Route, Router, Redirect } from 'react-router'

除此之外，react-router-dom还另外新增了Link、BrowserRouter、HashRouter组件。

因此，在引入react-router-dom后不需要显性引入react-router，react-router-dom依赖react-router，npm都会将他们安装。

react-router-dom配置路由：

// App.js
import React from 'react'
import { NavLink, Route, HashRouter, Redirect } from 'react-router-dom'
import Home from './Home'
import About from './About'
import Repos from './Repos'

export default class App extends React.Component {
  render() {
    return (
      
        

          

            
About
            
Repos
          
           // 指定默认路由，用Redirect组件也可以实现
          
          
        
      
    )
  }
}

注意：Route组件必须由Router、HashRouter、BrowserRouter组件包裹

二、React-router

在React-router4.0的代码库中，根据使用场景包含了以下几个独立的包：

• react-router : react-router4.0的核心代码
• react-router-dom : 构建网页应用，存在DOM对象场景下的核心包
• react-router-native : 适用于构建react-native应用
• react-router-config : 配置静态路由
• react-router-redux : 结合redux来配置路由，已废弃，不推荐使用。

所提供的API都是以组件的形式给出。

比如BrowserRouter、Router、Link、Switch等API都是以组件的形式来使用。

1.路由组件 BrowserRouter 和 HashRouter

BrowserRouter（history模式） 和 HashRouter（hash模式）作为路由配置的最外层容器，是两种不同的模式，可根据需要选择。

history 模式：

class App extends Component {
  render() {
    return (
      
          

          
          
          
      
    )
  }
}

hash 模式：

class App extends Component {
  render() {
    return (
      
          

          
          
          
      
    )
  }
}

2.路径匹配组件: Route 和 Switch

2.1Route

Route: 用来控制路径对应显示的组件

参数：

• path：指定路由跳转路径

• exact: 精确匹配路由

• component：路由对应的组件

  import About from './pages/about';
  
  ··· ···
  
  
  

• render： 通过写render函数返回具体的dom：

   (
  about
  )}>
  

  render 也可以直接返回 About 组件，像下面：

    }>
  

  不仅可以通过 render 方法传递 props 属性，并且可以传递自定义属性:

   {
      return 
  }}>
  

  //然后，就可在 About 组件中获取 props 和 name 属性：

  	componentDidMount() {
      console.log(this.props) 
  }
  

  render 方法也可用来进行权限认证：

  	 {
      // isLogin 从 redux 中拿到, 判断用户是否登录
      return isLogin ?  : 
  请先登录
  }}>
  

• location: 将 与当前历史记录位置以外的位置相匹配，则此功能在路由过渡动效中非常有用

• sensitive：是否区分路由大小写

• strict: 是否配置路由后面的 ‘/’

传参：

2.2Switch

渲染与该地址匹配的第一个子节点 或者 。

类似于选项卡，只是匹配到第一个路由后，就不再继续匹配：

 
    
     
     
     


// 类似于：
// switch(Route.path) {
//     case '/home':
//         return Home
//     case '/login':
//         return Login
//     ··· ···
// }

如果像下面这样,当路由为/detail/1时，只会访问匹配组件detail, 所以需要在detail路由上加上exact

注意：如果路由 Route 外部包裹 Switch 时，路由匹配到对应的组件后，就不会继续渲染其他组件了。但是如果外部不包裹 Switch 时，所有路由组件会先渲染一遍，然后选择到匹配的路由进行显示。

2.3导航组件: Link 和 NavLink

Link 和 NavLink 都可以用来指定路由跳转，NavLink 的可选参数更多。

Link:

    登录

    登录

NavLink:
可以看做 一个特殊版本的 Link，当它与当前 URL 匹配时，为其渲染元素添加样式属性。

    登录

2.4 Redirect

将导航到一个新的地址。即重定向。

 
    
     
     

//当访问路由‘/’时，会直接重定向到‘/home’。

是否登录：

class Center extends PureComponent {
    render() {
        const { loginStatus } = this.props;
        if (loginStatus) {
            return (
                
个人中心
            )
        } else {
            return 
        }
    }
}

2.5 withRouter

withRouter 可以将一个非路由组件包裹为路由组件，使这个非路由组件也能访问到当前路由的match, location, history对象。

我们项目中的类组件就是这么用的

import { withRouter } from 'react-router-dom';

class Detail extends Component {
    render() {
        ··· ···
    } 
}
 
const mapStateToProps = (state) => {
    return {
        ··· ···
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        ··· ···
    }
}
 
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail));

2.6编程式导航 - history 对象

一般只有通过 Route 组件渲染的组件，才能在 this.props 上找到 history 对象

如果想在路由组件的子组件中使用 history ，需要使用 withRouter 包裹

import React, { PureComponent } from 'react';
import { withRouter } from 'react-router-dom';

class 子组件 extends PureComponent {

    goHome = () => {
        this.props.history.push('/home')
    }


    render() {
        console.log(this.props)
        return (
            
子组件
        )
    }
}

export default withRouter(子组件);

history 对象通常会具有以下属性和方法：

length - (number 类型) history 堆栈的条目数
action - (string 类型) 当前的操作(PUSH, REPLACE, POP)
location - (object 类型) 当前的位置。location 会具有以下属性：
pathname - (string 类型) URL 路径
search - (string 类型) URL 中的查询字符串
hash - (string 类型) URL 的哈希片段
state - (object 类型) 提供给例如使用 push(path, state) 操作将 location 放入堆栈时的特定 location 状态。只在浏览器和内存历史中可用。
push(path, [state]) - (function 类型) 在 history 堆栈添加一个新条目
replace(path, [state]) - (function 类型) 替换在 history 堆栈中的当前条目
go(n) - (function 类型) 将 history 堆栈中的指针调整 n
goBack() - (function 类型) 等同于 go(-1)
goForward() - (function 类型) 等同于 go(1)
block(prompt) - (function 类型) 阻止跳转。

2.7路由过渡动画

React 提供了一个 ReactTransitionGroup 插件作为动画的底层API,和一个 ReactCSSTransitionGroup 用于轻松实现基础的CSS动画和过渡。
react-transition-group

import { TransitionGroup, CSSTransition } from "react-transition-group";

class App extends Component {

  render() {
    return (
      
         
          
            

              

              
              {/* 最外部的不进行任何路由匹配，仅仅是用来传递 location */}
              
               {
                console.log(location);
                return (
                  
                    
                      
                        
                        
                        
                        
                        
                         
Not Found
} />
                      
                    
                  
                )
              }}>
              
            
          
        
      
    )
  }
}

.fade-enter {
  opacity: 0;
  z-index: 1;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

参考：
https://segmentfault.com/a/1190000016435538
https://juejin.cn/post/6844904031857410062

本文链接https://blog.csdn.net/qq_39903567/article/details/116229555