ReactRouterv6新特性有哪些

这篇文章主要介绍“React Router v6新特性有哪些”，在日常操作中，相信很多人在React Router v6新特性有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”React Router v6新特性有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

南山ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！

1. 重命名为

该顶级组件将被重命名。但是，其功能大部分保持不变（嗨，瞎折腾）。

// v5                  // v6        } />      } />  

2. 的新特性变更

component/render被element替代

总而言之，简而言之。就是变得更好用了。

import Profile from './Profile';  // v5     (          )}  />  // 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 (      
                                                                                              
    );  }

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

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

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

3.2 新API:Outlet

这玩意儿，像极了{this.props.children}，具体用法看以下例子：

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

3.3 多个

以前，我们只能 在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

从一目了然改到双目失明。。。

总感觉React Router团队有点儿戏。。。

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

现在，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. 迁移及其它重要修复...

官方的迁移指南在这里：React Router v6 迁移指南

其实上面所列的新特性，基本就是迁移的全部内容了。

基础的起手式就是更新包：

$ 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 种占位符：动态:id样式参数和*通配符

以下都是 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版本之前的路径，存在路由歧义

1.  当前路径:"/users"，则将跳转。

2.  当前路径:"/users/"，则将跳转。

React Router v6修复了这种歧义，取消了尾部"/"：

1.  当前路径:"/users"，则将跳转。

2.  当前路径:"/users"，则将跳转。

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

// 当前路径为 /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

到此，关于“React Router v6新特性有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！