React-Router

参考链接：https://segmentfault.com/a/1190000017140200

react-router-dom这个包，给我们声明了很多的组件,我们可以直接导入这些组件去使用，就可以完成我们想要的路由相关的功能

原理：实现URL与UI界面的同步。其中在react-router中，URL对应Location对象，
而UI是由react components来决定的，这样就转变成location与components之间的同步问题。

优点：

1.风格: 与React融为一体,专为react量身打造，编码风格与react保持一致，例如路由的配置可以通过component来实现
2.简单: 不需要手工维护路由state，使代码变得简单
3.强大: 强大的路由管理机制，体现在如下方面
4.路由配置: 可以通过组件、配置对象来进行路由的配置
5.路由切换: 可以通过 Redirect进行路由的切换
6.路由加载: 可以同步记载，也可以异步加载，这样就可以实现按需加载
7.使用方式: 不仅可以在浏览器端的使用，而且可以在服务器端的使用

缺点：API不太稳定，在升级版本的时候需要进行代码变动。

react-router4和react-router3区别：https://blog.csdn.net/qq_35484341/article/details/80500237

1. V4不再使用V3里的{props.children}(代表所有路由-个人理解)，而V4丢给 DOM 的是我们的应用程序本身.
2. V4还同时支持同时渲染多个路由，1和2都可参照下面代码，当访问 /user 时，两个组件都会被渲染。(V3可实现但过程复杂)
3.获取路由的路径匹配，可以使用props.match.path获取，match上还有match.params,match.url等属性。
注：url是浏览器的url的一部分，path是给router写的路径
4.多了一个限制未登录的用户访问某些路由功能，可以在应用程序顶端中设置一个主入口，区别登录和未登录UI展示界面。

  

    

      Our React Router 4 App
      
    
    

      
      
    
  
;

1. 路由容器相关的组件： HashRouter: 有#号，锚点实现 BrowserRouter：没有#号，

 2. 路由连接 Link  NavLink

Link: to属性，表示的点击这个Link，跳转到的路由， Link最终渲染成a标签

NavLink: 作用和Link是一样的，路由跳转 NavLink比Link更强大的一点是可以指定样式

3. 路由匹配 Route: 一条路由规则    Switch: 保证同时只会匹配一条路由规则

 Route表示一条路由规则，同时也表示路由的出口（匹配的组件在哪儿显示）

 Switch组件，可以保证只会匹配到一个路由， Swicth中只能出现Route

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

          
我是一个根组件
          

            

              
                首页
              
            
            

              
                用户管理
              
            
            

              
                登录
              
            
          

          
            {/* path="/" 只要是/xxx的路由都匹配上exact表示精确匹配 */}
            {/* Redirect: 表示路由的重定向 */}
            
            
            
            
          
        
      
    )
  }
}

4. 声明式导航： 通过Link或者NavLink实现导航的跳转

    编程式导航： 通过js代码来实现路由的跳转 router.push()

import React from 'react'
// 如果想要通过js来实现react中路由的跳转
// 1. 导入withRouter方法
// 2. 使用withRouter包裹住当前组件
// 3. withRouter把当前组件包裹后，在当前组件的props中就能够获取history对象
// ，通过history对象就可以实现路由的额跳转
import { withRouter } from 'react-router-dom'
class Login extends React.Component {
  render() {
    console.log(this.props.history)
    // history对象
    let { history } = this.props
    return (
      

        {/* 需求：点击登录的时候，跳转到首页组件去 */}
        {/* 编程式导航：通过js来显现路由的跳转 */}
        这是Login组件{' '}
         history.push('/home')}>点击登录
      
    )
  }
}
export default withRouter(Login)