盗墓笔记有声小说,豆豆小说阅读网,小说网

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

React-Router v6新特性解讀及遷移指南

前言

18 年初，React Router的主要開發(fā)人員創(chuàng)建一個名為Reach Router的輕量級替代方案。

原來是相互抗衡的，卻沒想React Router直接拿來合并（真香?。?/p>

目前 v6已是測試最后一版，估計新的特性不出意外就是下面這些了：

重命名為。
的新特性變更。
嵌套路由變得更簡單。
用useNavigate代替useHistory。
新鉤子useRoutes代替react-router-config。
大小減少：從20kb到8kb

1. 重命名為

該頂級組件將被重命名。但是，其功能大部分保持不變（嗨，瞎折騰）。

2. 的新特性變更

component/render被element替代

總而言之，簡而言之。就是變得更好用了。

 
 
 
   
  
  
  import Profile from './Profile';    
  
  
  // v5    
  
  
      
  
  
    
  
  
  
  path=":userId"    
  
  
    render={routeProps => (    
  
  
          
  
  
    )}    
  
  
  />    
  
  
  // v6    
  
  
  } />    
  
  
  } />

3. 嵌套路由變得更簡單

具體變化有以下：

已更改為接受子路由。
比和更簡單的匹配規(guī)則。
路徑層次更清晰。

3.1 簡化嵌套路由定義

v5中的嵌套路由必須非常明確定義，且要求在這些組件中包含許多字符串匹配邏輯（活久見啊，終于意識到這個問題了。）

且看之前的處理：

 
 
 
   
  
  
  // v5    
  
  
  import {    
  
  
    BrowserRouter,    
  
  
    Switch,    
  
  
    Route,    
  
  
    Link,    
  
  
    useRouteMatch    
  
  
  } from 'react-router-dom';    
  
  
  function App() {    
  
  
    return (    
  
  
          
  
  
            
  
  
              
  
  
              
  
  
            
  
  
          
  
  
    );    
  
  
  }    
  
  
  function Profile() {    
  
  
    let { path, url } = useRouteMatch();    
  
  
    return (    
  
  
          
  
  
            
  
  
          My Profile

);

}

而在v6中，你可以刪除字符串匹配邏輯。不需要任何useRouteMatch()！

 
 
 
   
  
  
  // v6    
  
  
  import {    
  
  
    BrowserRouter,    
  
  
    Routes,    
  
  
    Route,    
  
  
    Link,    
  
  
    Outlet    
  
  
  } from 'react-router-dom';    
  
  
  function App() {    
  
  
    return (    
  
  
          
  
  
            
  
  
          } />    
  
  
          } />    
  
  
            
  
  
          
  
  
    );    
  
  
  }    
  
  
  function Profile() {    
  
  
    return (    
  
  
          
  
  
            
  
  
          My Profile    
  
  
            
  
  
            
  
  
          } />    
  
  
          } />

);

}

當(dāng)然，還有更酸爽的操作，直接在路由里定義的，然后用接下來的一個新API：Outlet

3.2 新API:Outlet

這玩意兒，像極了{this.props.children}，具體用法看以下例子：

 
 
 
   
  
  
  function App() {    
  
  
    return (    
  
  
          
  
  
            
  
  
          } />    
  
  
          }>    
  
  
            } />    
  
  
            } />    
  
  
              
  
  
            
  
  
          
  
  
    );    
  
  
  }    
  
  
  function Profile() {    
  
  
    return (    
  
  
          
  
  
            
  
  
          My Profile    
  
  
            
  
  
          {/*    
  
  
         將直接根據(jù)上面定義的不同路由參數(shù)，渲染或    
  
  
          */}

)

}

3.3 多個

以前，我們只能在React App中使用一個 Routes。但是現(xiàn)在我們可以在React App中使用多個路由，這將幫助我們基于不同的路由管理多個應(yīng)用程序邏輯。

 
 
 
   
  
  
  import React from 'react';    
  
  
  import { Routes, Route } from 'react-router-dom';    
  
  
  function Dashboard() {    
  
  
    return (    
  
  
          
  
  
        Look, more routes!
    
  
  
            
  
  
          } />    
  
  
          } />

);

}

function App() {

return (

} />

);

}

4. 用useNavigate代替useHistory

從一目了然改到雙目失明。。。

總感覺React Router團隊有點兒戲。。。

 
 
 
   
  
  
  // v5    
  
  
  import { useHistory } from 'react-router-dom';    
  
  
  function MyButton() {    
  
  
    let history = useHistory();    
  
  
    function handleClick() {    
  
  
      history.push('/home');    
  
  
    };    
  
  
    return Submit;    
  
  
  };

現(xiàn)在，history.push()將替換為navigation()：

 
 
 
   
  
  
  // v6    
  
  
  import { useNavigate } from 'react-router-dom';    
  
  
  function MyButton() {    
  
  
    let navigate = useNavigate();    
  
  
    function handleClick() {    
  
  
      navigate('/home');    
  
  
    };    
  
  
    return Submit;    
  
  
  };

history的用法也將被替換成：

 
 
 
   
  
  
  // v5    
  
  
  history.push('/home');    
  
  
  history.replace('/home');    
  
  
  // v6    
  
  
  navigate('/home');    
  
  
  navigate('/home', {replace: true});

強行達成共識

5. 新鉤子useRoutes代替react-router-config。

感覺又是一波強行hooks，但還是相對于之前簡潔了一些。。。

 
 
 
   
  
  
  function App() {    
  
  
    let element = useRoutes([    
  
  
      { path: '/', element:  },    
  
  
      { path: 'dashboard', element:  },    
  
  
      { path: 'invoices',    
  
  
        element: ,    
  
  
        children: [    
  
  
          { path: ':id', element:  },    
  
  
          { path: 'sent', element:  }    
  
  
        ]    
  
  
      },    
  
  
      // 重定向    
  
  
      { path: 'home', redirectTo: '/' },    
  
  
      // 404找不到    
  
  
      { path: '*', element:  }    
  
  
    ]);    
  
  
    return element;    
  
  
  }

6. 大小減少：從20kb到8kb

React Router v6給我們帶來方便的同時，還把包減少了一半以上的體積。。。

感覺可以去看一波源碼了。。。

7. 遷移及其它重要修復(fù)...

官方的遷移指南在這里：React Router v6 遷移指南

其實上面所列的新特性，基本就是遷移的全部內(nèi)容了。

基礎(chǔ)的起手式就是更新包：

 
 
 
   
  
  
  $ npm install react-router@6 react-router-dom@6    
  
  
  # or, for a React Native app    
  
  
  $ npm install react-router@6 react-router-native@6

其中我覺得特別需要注意的一點是：React Router v6 使用簡化的路徑格，僅支持 2 種占位符：動態(tài):id樣式參數(shù)和*通配符

以下都是 v6 中的有效路由路徑：

 
 
 
   
  
  
  /groups    
  
  
  /groups/admin    
  
  
  /users/:id    
  
  
  /users/:id/messages    
  
  
  /files/*    
  
  
  /files/:id/*    
  
  
  /files-*

使用RegExp正則匹配的路徑將無效：

 
 
 
   
  
  
  /users/:id?    
  
  
  /tweets/:id(\d+)    
  
  
  /files/*/cat.jpg

v6中的所有路徑匹配都將忽略 URL 上的尾部"/"。實際上，已被刪除并且在 v6 中無效。這并不意味著您不需要使用斜杠。

在v5版本之前的路徑，存在路由歧義

當(dāng)前路徑:"/users"，則將跳轉(zhuǎn)。
當(dāng)前路徑:"/users/"，則將跳轉(zhuǎn)。

React Router v6修復(fù)了這種歧義，取消了尾部"/"：

其形式更像命令行cd的用法：

 
 
 
   
  
  
  // 當(dāng)前路徑為 /app/dashboard    
  
  
     
  
  
                 //     
  
  
              //     
  
  
           //     
  
  
        //     
  
  
  // 命令行當(dāng)前路徑為 /app/dashboard    
  
  
  cd stats                        // pwd is /app/dashboard/stats    
  
  
  cd ../stats                     // pwd is /app/stats    
  
  
  cd ../../stats                  // pwd is /stats    
  
  
  cd ../../../stats               // pwd is /stats

新聞標題：React-Router v6新特性解讀及遷移指南
URL地址：http://fisionsoft.com.cn/article/djdpidd.html

新聞中心

其他資訊