我的编程空间,编程开发者的网络收藏夹
学习永远不晚

ReactRouterV6更新内容详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

ReactRouterV6更新内容详解

React Router V6 变更介绍

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

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

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

2. < Route >的新特性变更

component/render被element替代


// v5
<Switch>
    <Route  path="/about" component={About}/>
    <Route  path="/home" component={Home}/>
</Switch>
//v6
<Routes>
    <Route  path="/about" element={<About/>}/>
    <Route  path="/home" element={<Home/>}/>
</Routes>

3. 嵌套路由变得更简单

3.1 具体变化有以下:

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About/>}>
          <Route path="/about/message" element={<Message/>} />
          <Route path="/about/news" element={<News/>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
function About() {
  return (
    <div>
      <h1>About</h1>
      <Link to="/about/message">Message</Link>
	  <Link to="/about/news">News</Link>
        {}
      <Outlet />
    </div>
  )
}

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

3.2 废弃了V5中的Redirect


//v5
<Redirect to="/"/>
//v6
<Route path="*" element={<Navigate to="/" />}/>

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


// v5
import { useHistory } from 'react-router-dom';
function MyButton() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};
//v6中history.push()替换为navigation()
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. Hooks中新钩子useRoutes代替react-router-config


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

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

ReactRouterV6更新内容详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

win10 9861怎么样?win10预览版9861更新内容详解

win10 9861怎么样?下文将带给大家关于win10预览版9861更新内容方面的介绍,Win10技术预览版最新内部版本号已经更新至9861,这个版本有哪些新的变化呢? 编程客栈Build9861具体信www.cppcns.com息为:9
2023-06-08

Win10正式版10586.164更新哪些内容? KB3140768更新内容汇总

在向手机推送Win10 Mobile准正式版10586.164的同时,微软也向PC用户推送了相同版本的累积更新KB3140768。和手机版类似,http://www.cppcns.com本次更新并非增加新功能,而是进行各种修复。电脑版修复重
2023-05-19

deepin更新内容分析

这篇文章主要介绍“deepin更新内容分析”,在日常操作中,相信很多人在deepin更新内容分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”deepin更新内容分析”的疑惑有所帮助!接下来,请跟着小编一起来
2023-06-10

Win10稳定预览版14393.103更新哪些内容? 更新内容汇总

微软已经向位于Windows Insider发布预览和js慢速通道的用户推php送了Win10稳定预览版14393.103更新补丁,本次更新内容较为广泛,涉及多项系统组件可靠性提升,解决了包括Wihttp://www.cppcns.comn
2023-05-21

win10预览版10125更新内容了什么内容?win10预览版10125更新内容汇总

win10预览版10125已经在网上现出了真容,今天就为大家带来win10预览版10125更新内容汇总,想了解win10预览版10125的朋友可以来看看!win10预览版10125在图标、开始菜单/开始屏幕、任务栏等方面的改进非常明显,增加
2023-06-15

deepin深度系统更新了哪些内容?最新版deepin更新内容汇总

deepin 是一个致力于为全球用户提供美观易用、安全稳定的 Linux 发行版。前天深度系统官方发布了深度系统更新(2020.11.25),本次更新部分深度应用,全面优化使用体验,包括磁盘管理器、文件管理器、深度音乐、深度影院、深度相机等
2022-05-19

Laravel10更新了哪些内容

这篇文章主要讲解了“Laravel10更新了哪些内容”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Laravel10更新了哪些内容”吧!Laravel 10 放弃对 PHP 8.0 的支持所
2023-07-05

WordPress6.0更新了哪些内容

这篇文章主要讲解了“WordPress6.0更新了哪些内容”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“WordPress6.0更新了哪些内容”吧!WordPress 6.0 主要更新内容如
2023-06-30

windows kb4530734更新哪些内容

这篇文章主要讲解了“windows kb4530734更新哪些内容”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“windows kb4530734更新哪些内容”吧!kb4530734更新内容
2023-07-01

详解织梦DEDECMS站点内容自动更新到新浪微博的方法

新浪微博是利用feed找到更新文章的。只要给他指定feed地址就可以成功关联啦。 现在开始动手简单修改一下织梦的模板,由于织梦不能生成全站的xml文件,所以要先建立生成全站XML的php程序。 1,建立feed.php
2022-06-12

win1019013更新了哪些内容

这篇文章主要讲解了“win1019013更新了哪些内容”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“win1019013更新了哪些内容”吧!前言: 面向Fast通道成员,微软于今天发布了Wi
2023-07-01

Java7更新了哪些内容

本篇内容主要讲解“Java7更新了哪些内容”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Java7更新了哪些内容”吧!Java 7,是JDK 7的另一个常用称呼,也叫做Java SE 7。JDK
2023-06-17

Win10 PC一周年更新预览版14390更新内容及修复内容大全

7月14日预报了唐娜姐本周将推送Win10第二个新预览版的消息,微软今天推送了Win10 PC一周年更新预览版14390,本次更新仅向快速预览通道的Win10桌面系统预览版python用户,本文为14390版本的更新内容大全。更新内容 &b
2023-05-21

Win10/WP10手机系统预览版更新内容汇总(图文详解)

1月22日,微软正式发布Windows10 for Phone预览版系统,并计划在2月份推送更新。在大会上,微软Windows副总裁Joe Belfiore展示了一些Win10手机版特性,包括全新的开始屏幕、应用列表和系统设置,改进的通知中
2023-06-10

win10预览版10125更新内容 windows10build10125更新日志

winwtndAm10测试版多的令人咂舌,不过离win10正式版发布的日子也越来越近了,现在就和小编一起来看下Windows10build10125更新日志。win10预览版10125更新日内容:• Microsoft Edge:
2023-06-15

ThinkPHP6.1.2版更新了哪些内容

今天小编给大家分享一下ThinkPHP6.1.2版更新了哪些内容的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。V6.1.2版
2023-07-05

编程热搜

目录