react-router-domV5和V6比较

原博 ： https://blog.csdn.net/FengZi_00/article/details/122127889

react-router-dom从V5升级到V6后，有些使用做了一些改变：

1. 重命名为。
2. 的新特性变更。
3. 嵌套路由变得更简单。
4. 用useNavigate代替useHistory。
5. 新钩子useRoutes代替react-router-config。

(1) Switch 重命名为 Routes

// v5

    
    

 
// v6 
import { HashRouter, Route, Routes } from "react-router-dom"; 
 

      
        
          } />
          } />
        
      
  

(2) Route 的新特性变更 ,component/render被element替代

import Profile from './Profile';
 
// v5

<Route
  path=":userId"
  render={routeProps => (
    true} />
  )}
/>
 
// v6
} />
true} />} />
 

(3) 嵌套路由变得更简单

具体变化有以下：

1. Route children 已更改为接受子路由。
2. 比Route exact 和 Route strict更简单的匹配规则。
3. Route path 路径层次更清晰。

v5 中的嵌套路由必须非常明确定义，且要求在这些组件中包含许多字符串匹配逻辑.

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

      
 
      
        
          
        
        
          
        
      
    
  );
}

v6 中，你可以删除字符串匹配逻辑。不需要任何 useRouteMatch()

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

      
 
      
        } />
        } />
      
    
  );
}

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

新API:Outlet

function App() {
  return (
    
      
        } />
        }>
          } />
          } />
        
      
    
  );
}
 
function Profile() {
  return (
    

      
        {/* 将直接根据上面定义的不同路由参数，渲染 或  */}
      
    
  )
}

多个 Routes

以前，我们只能在 React App 中使用一个 Routes。但是现在我们可以在 React App 中使用多个路由，这将帮助我们基于不同的路由管理多个应用程序逻辑。

import React from 'react';
import { Routes, Route } from 'react-router-dom';
 
function Dashboard() {
  return (
    

      
Look, more routes!
      
        } />
        } />
      
    
  );
}
 
function App() {
  return (
    
      } />
      } />
    
  );
}

(4) 用 useNavigate 代替 useHistory

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

history的用法也将被替换成navigate

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

(5) 新钩子 useRoutes 代替 react-router-config

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