本文共 2921 字，大约阅读时间需要 9 分钟。

react-router

一、什么是路由？

1. 在实际开发中, 我们需要根据不同的url地址, 加载不同的组件(界面)
2. 此时, 就可以借助一个库, 来实现 url地址 到 组件的映射
   路由：react-router 就提供了此功能
3. react-router被分为几部分
   ① react-router是浏览器和原生应用的通用部分
   ② react-router-dom是用于浏览器的
   ③ react-router-native是用于原生应用的

二、react-router-dom

3. 安装

   我们使用react开发web应用，所以只需要安装react-router-dom
   yarn add react-router-dom

4. react-router 相关 API

   ① 组件
   1. <BrowserRouter>
   2. <HashRouter>
   3. <Route>
   4. <Redirect>
   5. <Link>
   6. <NavLink>
   7. <Switch>

   ② 其它

   1. history 对象
   2. match 对象
   3. withRouter 函数

三、使用

1. 基本使用

   ① 简单案例
   最外层需要包裹组件 <Router> 组件
   组件 <Route>就是你看到的组件内容
   组件<Link> 是页面链接
   ② 案例代码

        
             {
        /*路由导航*/}    
         
           
          
           首页
           
          
           关于
       
         
       {
        /*路由出口*/}    
         
          
             
         
          
         
        

2. BrowserRouter和HashRouter

   ① BrowserRouter
   1. BrowserRouter 是需要服务端配合, 是基于html5的pushState和replaceState的，很多浏览器不支持，存在兼容性问题。
   2. 主要属性
      ① basename：设置根路径
      ② getUserConfirmation：获取用户确认的函数
      ③ forceRefresh：是否刷新整个页面
      ④ keyLength：location.key的长度
      ⑤ children：子节点（单个）
      链接地址： http://localhost:3000/itlike

   ② HashRouter

   1. HashRouter 是由浏览器端解析路由
   2. 主要属性
      ① basename：设置根路径
      ② getUserConfirmation：获取用户确认的函数
      ③ hashType: hash的类型
      ④ children：子节点（单个）
      链接地址： http://localhost:3000/#/itlike

   ③ 灵活切换

   import {
        HashRouter as Router, Route, Link, Switch} from 'react-router-dom'// import {BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom'
        
           ...
        

   使用as Router 做别名，方便切换

   ④ 区别

   1. 如果是非静态站点，要处理各种不同的url，则需要使用BrowserRouter
   2. 如果是静态站点，只需要匹配静态url，则使用HashRouter即可
   3. HashRouter是锚点链接，BrowserRouter是h5新特性，运用的是history对象一系列api， 上线后需要后端做重定向处理，不然有时会出现页面404bug
      ① 演示https://daojia.jd.com/

3. 组件 <Route> 属性 exact 完全匹配

   ① exact=false 的时候 path 等于 /about /about/me 都能匹配
   ② 但是 exact=true 的时候 只匹配 path 等于 /about

4. 组件 <Route> 属性 strict 末尾斜杠的匹配

   ① 当 strict=true 路由请求末尾带上 /

5. 组件 <Switch>

   渲染出第一个与当前访问地址匹配的 <Route> 或 <Redirect>

   {
        /*写法3*/}
           
            
          
          }  />   
             
             
          
         
        {
        /*写法2*/}
           
            
            
            
            
         
        {
        /*写法1*/}
           
         
          
            
         
          
            
         
          
            
         
          
            
         
        

6. 组件 <NavLink>

   1. 生成路由链接的基础上，如果是当前路由设置激活样式
   2. 属性 activeClassName: string
      样式名称

             
              关于
             

   3. 属性 activeStyle: object
      样式对象

             
              关于
             

7. 组件 <Link>

   ① to: string 路由地址：字符串

        关于

   ② to: object 路由地址：对象

        关于

   ③ to: function 路由地址：函数

         ({
         ...location, pathname: "/courses" })} />
         `${
          location.pathname}?sort=name`} />

   ⑤ replace: bool 设置 true 替换浏览器对象 history 为当前路由，按回退按钮时，之前的路由被替换了

   
   

8. 组件 <Redirect>路由重定向

   ① 属性 from: string 需要匹配的将要被重定向路径
   ② 属性 to: string 重定向的 URL 字符串
   ③ 属性 to: object 重定向的 location 对象
   ④ 属性 push: bool 若为真，重定向操作将会把新地址加入到访问历史记录里面，并且无法回退到前面的页面
   

9. 组件 <Prompt> 当用户离开当前页面前做出一些提示。

   ① 属性 message: string 当用户离开当前页面时，设置的提示信息

   ② 属性 message: func 当用户离开当前页面时，设置的回掉函数

        
          `确定要去 ${
          location.pathname} ?`} />
        

   ③ 属性 when: bool 决定是否启用 Prompt

   

10. withRouter的使用

    将组件外面包一层withRouter,可以让组件使用props.history.push、props.history.replace等方法
    

转载地址：https://kaisarh.blog.csdn.net/article/details/111475781 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！