React-Router v6新特性解读及迁移指南

前言

18 年初，React Router的主要开发人员创建一个名为Reach Router的轻量级替代方案。

原来是相互抗衡的，却没想React Router直接拿来合并（真香！）

目前 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. 嵌套路由变得更简单

具体变化有以下：

已更改为接受子路由。
比和更简单的匹配规则。
路径层次更清晰。

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    
  
  
            
  
  
            
  
  
          } />    
  
  
          } />

当然，还有更酸爽的操作，直接在路由里定义的，然后用接下来的一个新API：Outlet

function App() {
return (
} />
}>
} />
} />
);
}
function Profile() {
return (
My Profile
{/*
将直接根据上面定义的不同路由参数，渲染或
*/}

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

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

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

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

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;
}

// 当前路径为 /app/dashboard
//
//
//
//
// 命令行当前路径为 /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