React Router v6新特性有哪些

发布时间:2021-11-05 11:38:47 作者:iii
来源:亿速云 阅读:162

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

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

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

// v5  <Switch>      <Route exact path="/"><Home /></Route>      <Route path="/profile"><Profile /></Route>  </Switch>  // v6  <Routes>      <Route path="/" element={<Home />} />      <Route path="profile/*" element={<Profile />} />  </Routes>

2. <Route>的新特性变更

component/render被element替代

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

import Profile from './Profile';  // v5  <Route path=":userId" component={Profile} />  <Route    path=":userId"    render={routeProps => (      <Profile routeProps={routeProps} animate={true} />    )}  />  // v6  <Route path=":userId" element={<Profile />} />  <Route path=":userId" element={<Profile animate={true} />} />

3. 嵌套路由变得更简单

具体变化有以下:

3.1 简化嵌套路由定义

v5中的嵌套路由必须非常明确定义,且要求在这些组件中包含许多字符串匹配逻辑(活久见啊,终于意识到这个问题了。)

React Router v6新特性有哪些

且看之前的处理:

// v5  import {    BrowserRouter,    Switch,    Route,    Link,    useRouteMatch  } from 'react-router-dom';  function App() {    return (      <BrowserRouter>        <Switch>          <Route exact path="/" component={Home} />          <Route path="/profile" component={Profile} />        </Switch>      </BrowserRouter>    );  }  function Profile() {    let { path, url } = useRouteMatch();    return (      <div>        <nav>          <Link to={`${url}/me`}>My Profile</Link>        </nav>        <Switch>          <Route path={`${path}/me`}>            <MyProfile />          </Route>          <Route path={`${path}/:id`}>            <OthersProfile />          </Route>        </Switch>      </div>    );  }

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

// v6  import {    BrowserRouter,    Routes,    Route,    Link,    Outlet  } from 'react-router-dom';  function App() {    return (      <BrowserRouter>        <Routes>          <Route path="/" element={<Home />} />          <Route path="profile/*" element={<Profile/>} />        </Routes>      </BrowserRouter>    );  }  function Profile() {    return (      <div>        <nav>          <Link to="me">My Profile</Link>        </nav>        <Routes>          <Route path="me" element={<MyProfile />} />          <Route path=":id" element={<OthersProfile />} />        </Routes>      </div>    );  }

当然,还有更酸爽的操作,直接在路由里定义<Route>的<Route>,然后用接下来的一个新API:Outlet

3.2 新API:Outlet

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

function App() {    return (      <BrowserRouter>        <Routes>          <Route path="/" element={<Home />} />          <Route path="profile" element={<Profile />}>            <Route path=":id" element={<MyProfile />} />            <Route path="me" element={<OthersProfile />} />          </Route>        </Routes>      </BrowserRouter>    );  }  function Profile() {    return (      <div>        <nav>          <Link to="me">My Profile</Link>        </nav>          {/*         将直接根据上面定义的不同路由参数,渲染<MyProfile />或<OthersProfile />          */}        <Outlet />      </div>    )  }

3.3 多个<Routes />

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

import React from 'react';  import { Routes, Route } from 'react-router-dom';  function Dashboard() {    return (      <div>        <p>Look, more routes!</p>        <Routes>          <Route path="/" element={<DashboardGraphs />} />          <Route path="invoices" element={<InvoiceList />} />        </Routes>      </div>    );  }  function App() {    return (      <Routes>        <Route path="/" element={<Home />} />        <Route path="dashboard/*" element={<Dashboard />} />      </Routes>    );  }

4. 用useNavigate代替useHistory

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

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

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

现在,history.push()将替换为navigation():

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

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: <Home /> },      { path: 'dashboard', element: <Dashboard /> },      { path: 'invoices',        element: <Invoices />,        children: [          { path: ':id', element: <Invoice /> },          { path: 'sent', element: <SentInvoices /> }        ]      },      // 重定向      { path: 'home', redirectTo: '/' },      // 404找不到      { path: '*', element: <NotFound /> }    ]);    return element;  }

6. 大小减少:从20kb到8kb

React Router v6给我们带来方便的同时,还把包减少了一半以上的体积。。。

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 上的尾部"/"。实际上,<Route strict>已被删除并且在 v6 中无效。这并不意味着您不需要使用斜杠。

在v5版本之前的路径,存在路由歧义

  1.  当前路径:"/users",则<Link to="me">将跳转<a href="/me">。

  2.  当前路径:"/users/",则<Link to="me">将跳转<a href="/users/me">。

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

  1.  当前路径:"/users",则<Link to="me">将跳转<a href="/users/me">。

  2.  当前路径:"/users",则<Link to="../me">将跳转<a href="/me">。

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

// 当前路径为 /app/dashboard   <Link to="stats">               // <a href="/app/dashboard/stats">  <Link to="../stats">            // <a href="/app/stats">  <Link to="../../stats">         // <a href="/stats">  <Link to="../../../stats">      // <a href="/stats">  // 命令行当前路径为 /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新特性有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. React组件如何实现卸载、路由跳转以及页面关闭之前进行提示的功能
  2. 从零开始学习搭建React脚手架项目

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

react router

上一篇:前端开发中有哪些框架和库

下一篇:web中GitHub上比较流行的存储库有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》