React Router V6更新内容详解

目录

• React Router V6 变更介绍
• 1. < Switch > 重命名为< Routes >
• 2. < Route >的新特性变更
• 3. 嵌套路由变得更简单
• 3.1 具体变化有以下：
• 3.2 废弃了V5中的Redirect
• 3.3 多个< Routes />
• 4. 用useNavigate代替useHistory
• 5. Hooks中新钩子useRoutes代替react-router-config
• 总结

React Router V6 变更介绍

之前一直在用5.x版本的Router，突然发现Router V6有一些变化，可以说是对嵌套路由更加友好了。这里，我们就做个简单的介绍。

1. < Switch > 重命名为< Routes >

之前在用Router时，需要用Switch包裹，Switch可以提高路由匹配效率(单一匹配) 。在V6中，该顶级组件将被重命名为Routes，注意的是其功能大部分保持不变。

2. < Route >的新特性变更

component/render被element替代

// v5

    
    

//v6

    }/>
    }/>

3. 嵌套路由变得更简单

3.1 具体变化有以下：

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

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

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

这里的< Outlet /> 相当于占位符，像极了{this.props.children}，也越来越像Vue了。

3.2 废弃了V5中的Redirect

//v5

//v6
}/>

3.3 多个< 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中history.push()替换为navigation()
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. Hooks中新钩子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;
}

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!