React Router V6更新内容详解

目录
  • ReactRouterV6变更介绍
    • 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
<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>
        {/*
       将直接根据上面定义的不同路由参数，渲染<MyProfile />或<OthersProfile />
        */}
      <Outlet />
    </div>
  )
}

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

赞 (0)

相关推荐

  • react-router-domV6版本的路由和嵌套路由写法详解

    目录 1-单级路由 2-嵌套路由(about路径进行嵌套) ReactRouterv6使用路由嵌套和重定向 1 - 单级路由 <NavLink to="/home">Home</NavLink> <NavLink to="/about">about</NavLink> <Routes>   <Route path='/home' element={<Home/>}/>   <R

  • React Router V6更新内容详解

    目录 ReactRouterV6变更介绍 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,突

  • 使用React Router v6 添加身份验证的方法

    目录 开始 基础路由 创建受保护的路由 使用嵌套路由和< Outlet /> 结尾 React Router v6是React应用程序的一个流行且功能强大的路由库.它提供了一种声明式的.基于组件的路由方法,并能处理URL参数.重定向和加载数据等常见任务. 这个最新版本的React Router引入了很多新概念,比如<Outlet />和layout布局路由,但相关文档仍然很少. 本文将演示如何使用React Router v6创建受保护的路由以及如何添加身份验证. 开始 打开终端,

  • react的hooks的用法详解

    hooks的作用 它改变了原始的React类的开发方式,改用了函数形式;它改变了复杂的状态操作形式,让程序员用起来更轻松;它改变了一个状态组件的复用性,让组件的复用性大大增加. useState // 声明状态 const [ count , setCount ] = useState(0); // 使用状态 <p>You clicked {count} times</p> <button onClick={()=>{setCount(count+1)}}>cli

  • React团队测试并发特性详解

    目录 引言 遇到的困境 1. 如何表达渲染结果? 2. 如何测试并发环境? React的应对策略 实现一个渲染器 如何测试并发环境? 总结 引言 React18进入大家视野已经有一段时间了,不知道各位有没有尝试并发特性呢? 当启用并发特性后,React会从同步更新变为异步.带优先级.可中断的更新. 这也为编写单元测试带来了一些难度. 本文来聊聊React团队如何测试并发特性. 遇到的困境 主要有两个问题需要面对. 1. 如何表达渲染结果? React可以对接不同宿主环境的渲染器,大家最熟悉的渲染

  • React中父子组件通信详解

    目录 父组件向子组件通信 存在期 父组件向子组件通信 在父组件中,为子组件添加属性数据,即可实现父组件向子组件通信.传递的数据可以分成两类 子组件是作为属性来接收这些数据的 第一类就是数据:变量,对象,属性数据,状态数据等等 这些数据发生改变,子组件接收的属性数据就发生了改变. 第二类就是方法:父组件可以向子组件传递属性方法,子组件接收方法,并可以在组件内执行,有两种执行方式 注意:父组件传给子组件的方法是不能执行的,执行了相当于将方法的返回值传递给子组件. 第一种 作为事件回调函数执行 参数默

  • React中的生命周期详解

    React中的生命周期详解

    目录 react生命周期 常用的生命周期 不常用的生命周 完整的生命周期图 react生命周期 函数组件无生命周期,生命周期只有类组件才拥有 生命周期函数指在某一时刻组件会自动调用并执行的函数. React每个类组件都包含生命周期方法,以便于在运行过程中特定的阶段执行这些方法. 例如:我们希望在第一次将其呈现到DOM时设置一个计时器Clock.这在React中称为“安装”.我们也想在删除由产生 的DOM时清除该计时器Clock.这在React中称为“卸载”. 一般分为:挂载.更新.卸载 常用的生

  • React DnD如何处理拖拽详解

    目录 正文 代码结构 DndProvider DragDropManager useDrag HTML5Backend TouchBackend 总结 正文 React DnD 是一个专注于数据变更的 React 拖拽库,通俗的将,你拖拽改变的不是页面视图,而是数据.React DnD 不提供炫酷的拖动体验,而是通过帮助我们管理拖拽中的数据变化,再由我们根据这些数据进行渲染.我们可能需要写额外的视图层来完成想要的效果,但是这种拖拽管理方式非常的通用,可以在任何场景下使用.初次使用可能感觉并不是那

  • React memo减少重复渲染详解

    React memo减少重复渲染详解

    目录 1. 概述 2. 使用 1. 概述 此方法是一个 React 顶层 Api 方法,给函数组件来减少重复渲染,类似于 PureComponent 和 shouldComponentUpdate 方法的集合体. React.memo顶层Api方法,它可以用来减少子组件的重复渲染次数,从而提升组件渲染性能. React.memo它是一个只能在函数组件中使用的顶层Api方法. 当父组件发生改变时,默认情况下它的子孙组件也会重新渲染,当某些子组件不需要更新时,也会被强制更新,为了避免这种情况,我们可

  • GraphQL在react中的应用示例详解

    GraphQL在react中的应用示例详解

    目录 什么是 GraphQL GraphQL出现的意义 传统API存在的主要问题: GraphQL 如何解决问题 GraphQL基本语法 标量类型 对象类型 枚举类型 GraphQL 内置指令 什么是 Apollo apollo-server 处理流程 1.解析阶段 2.校验阶段 3.执行阶段 Schema 给server端带来的便利性 创建client 将client注入到react 数据请求 数据缓存 apollo-client 总结 GraphQL 的优缺点 优点 缺点 什么是 Graph

  • Vue3 如何通过虚拟DOM更新页面详解

    Vue3 如何通过虚拟DOM更新页面详解

    目录 引言 Vue 虚拟 DOM 执行流程 DOM 的创建 patch 函数 patchElement 函数 节点自身属性的更新 子元素的更新 patchChildren 位运算 为什么位运算性能更好 如何运用位运算 最长递增子系列 贪心 + 二分 引言 上一讲我们主要介绍了 Vue 项目的首次渲染流程,在 mountComponent 中注册了effect 函数,这样,在组件数据有更新的时候,就会通知到组件的 update 方法进行更新 Vue 中组件更新的方式也是使用了响应式 + 虚拟 DO

随机推荐