【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

这篇具有很好参考价值的文章主要介绍了【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

博主主页👉🏻蜡笔雏田学代码
专栏链接👉🏻React专栏
之前学习了react-router-dom5版本的相关内容
参考文章👉🏻React路由(详解版)和 路由的模糊匹配,重定向以及嵌套路由
今天来学习react-router-dom6版本的相关知识!
感兴趣的小伙伴一起来看看吧~🤞

useroutes 嵌套路由,React,react.js,前端,javascript

概述

React Router 以三个不同的包发布到 npm 上,它们分别为:

  1. react-router: 路由的核心库,提供了很多的:组件、钩子。
  2. react-router-dom: 包含react-router所有内容,并添加一些专门用于 DOM 的组件,例如 等 。
  3. react-router-native: 包括react-router所有内容,并添加一些专门用于ReactNative的API,例如:<NativeRouter>等。

与React Router 5.x 版本相比,改变了什么?

  1. 内置组件的变化:移除<Switch/> ,新增 <Routes/>等。
  2. 语法的变化:component={About} 变为 element={<About/>}等。
  3. 新增多个hook:useParamsuseNavigateuseMatch等。
  4. 官方明确推荐函数式组件了!!!

1. 一级路由Routes

<BrowserRouter>

  1. 说明:<BrowserRouter> 用于包裹整个应用,v6版本中,依然需要用<BrowserRouter>标签将App组件包裹起来。
  2. 示例代码:
import React from 'react';
import ReactDOM from 'react-dom/client'
import App from './App'
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

<HashRouter>

  1. 说明:作用与<BrowserRouter>一样,但<HashRouter>修改的是地址栏的hash值。
  2. 备注:6.x版本中<HashRouter><BrowserRouter> 的用法与 5.x 相同。

基本使用

这里还是以之前学过的react-router-dom@5的案例来分析。

useroutes 嵌套路由,React,react.js,前端,javascript

App.jsx

import React from 'react'
import { NavLink, Routes, Route } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

export default function App() {
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header">
            <h2>React Router Demo</h2>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className="list-group-item" to="/about">About</NavLink>
            <NavLink className="list-group-item" to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              <Routes>
                <Route path='/about' element={<About />} />
                <Route path='/home' element={<Home />} />
              </Routes>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

<Routes/> 与 <Route/>

  1. v6版本中移出了先前的<Switch>,引入了新的替代者:<Routes>
  2. <Routes>和v5版本的Switch一样,如果匹配上了,往下就不会再匹配了。
  3. <Routes><Route>要配合使用,且必须要用<Routes>包裹<Route>
  4. <Route> 相当于一个 if 语句,如果其路径与当前 URL 匹配,则呈现其对应的组件。
  5. <Route caseSensitive> 属性用于指定:匹配时是否区分大小写(默认为 false)。
  6. 当URL发生变化时,<Routes> 都会查看其所有子 <Route> 元素以找到最佳匹配并呈现组件 。
  7. <Route> 也可以嵌套使用,且可配合useRoutes()配置 “路由表” ,但需要通过 <Outlet> 组件来渲染其子路由。

2. 重定向Navigate

在v5版本中,路由的重定向使用的是Redirect,在v6版本中使用的是Navigate

v5版本的写法:
import { Redirect } from 'react-router-dom'
<Redirect to="/home" />

v6版本的写法:
import { Navigate } from 'react-router-dom'
<Route path='/' element={<Navigate to='/about' />} />

作用

只要<Navigate>组件被渲染,就会修改路径,切换视图。

Navigate会接收两个属性: to 和 replace

<Navigate to='/about' replace={false}/>

replace属性用于控制跳转模式(push 或 replace,默认是push)。

路由的跳转有两种模式,push和replace,push模式会将这个url压入路由history栈顶; 而replace模式会将栈顶的url替换 。

Navigate组件可以设置replace的值为true或false,默认值为false,所以默认为push跳转。

3. NavLink高亮

useroutes 嵌套路由,React,react.js,前端,javascript

在v5版本中,实现NavLink高亮使用的是NavLink组件标签中的activeClassName属性,当你点击NavLink标签时,加哪个样式的类名。

<NavLink activeClassName='demo' className="list-group-item" to="/about">About</NavLink>
<NavLink activeClassName='demo' className="list-group-item" to="/home">Home</NavLink>

在v6版本中,想要实现自定义的类名,需要把className的值写成一个函数

//高亮样式
<style>
    .demo {
      background-color: orange !important;
      color: white !important;
    }
</style>
<NavLink className={({ isActive }) => 
{ return isActive ? 'list-group-item demo' : 'list-group-item' }} to="/about">
About
</NavLink>

/*
	默认情况下,当Home的子组件匹配成功,Home的导航也会高亮,
	当NavLink上添加了end属性后,若Home的子组件匹配成功,则Home的导航没有高亮效果。
*/
<NavLink to="home" end >home</NavLink>

代码优化实现复用

将ClassName的值封装成一个函数

function computedClassName({ isActive }) {
  return isActive ? 'list-group-item demo' : 'list-group-item'
}
...
<NavLink className={computedClassName} to="/about">About</NavLink>

4. useRoutes()路由表

作用

根据路由表,动态创建<Routes><Route>

在src下新建一个routes文件夹,专门用于维护路由表,应用中的路由都存放在路由表中。

useroutes 嵌套路由,React,react.js,前端,javascript

src/routes/index.js

import About from '../pages/About'
import Home from '../pages/Home';
import { Navigate } from 'react-router-dom';

export default [
  // 路由表
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/home',
    element: <Home />
  },
  {
    path: '/',
    element: <Navigate to='/about' />
  }
]

App.jsx

import React from 'react'
import { NavLink, useRoutes } from 'react-router-dom'
import routes from './routes/index';

export default function App() {
  
  // useRoutes可以用路由表生成<Routes>...</Routes>结构
  // 根据路由表生成对应的路由规则
  const element = useRoutes(routes)
 
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header">
            <h2>React Router Demo</h2>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className='list-group-item' to="/about">About</NavLink>
            <NavLink className='list-group-item' to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              {element}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

5. 嵌套路由Outlet

作用

<Route>产生嵌套时,渲染其对应的后续子路由 (类似于vue中 < < <router-view/>)

useroutes 嵌套路由,React,react.js,前端,javascript

如图,News组件和Message组件是Home的子组件

将二级路由放在children属性中注册:

...
{
    path: '/home',
    element: <Home />,
    children: [
      {
        path: 'news',
        element: <News />
      },
      {
        path: 'message',
        element: <Message />
      }
    ]
  },
...

Home.jsx

import React from 'react'
import { NavLink, Outlet } from 'react-router-dom';

export default function Home() {
  return (
    <div>
      <h2>Home组件内容</h2>
      <div>
        <ul className="nav nav-tabs">
          <li>
            <NavLink className="list-group-item" to="news">News</NavLink>
          </li>
          <li>
            <NavLink className="list-group-item" to="message">Message</NavLink>
          </li>
        </ul>
        {/* 指定路由组件呈现的位置 */}
        <Outlet />
      </div>
    </div>
  )
}

< < <NavLink className=‘list-group-item’ to=‘news’>News < < </NavLink>
中的to属性有三种写法:

  1. to=‘news’
  2. to=‘./news’
  3. to=‘/home/news’ //这一种与v5版本中一样

今天的分享就到这里啦✨ \textcolor{red}{今天的分享就到这里啦✨} 今天的分享就到这里啦

原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下

🤞 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!
文章来源地址https://www.toymoban.com/news/detail-786610.html

到了这里,关于【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【React】React-router路由

    路由是根据不同的url地址展示不同的内容或页面 注: 一个针对react设计的路由解决方案,可以友好的帮助解决React components到URL之间的同步映射关系 导入路由 注:路由模式有 HashRouter 和 BrowserRouter 两种模式,其中BrowserRouter的路径没有#,样式好看,真正朝后端发请求,后端若

    2023年04月17日
    浏览(69)
  • 【React】react-router 路由详解

    🚩🚩🚩 💎个人主页: 阿选不出来 💨💨💨 💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记. 💨💨💨 💎目前开发的专栏: JS 🍭Vue🍭React🍭 💨💨💨 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,根据不同的url地

    2024年02月01日
    浏览(40)
  • React-路由 react-router-dom

    前端路由的功能:让用户从一个页面跳转到另一个页面。 前端路由是一套映射规则 ,在 React 中, 是 URL 路径与组件的对应关系 。 使用 React 路由简单来说就是配置 路径与组件(配对) 。 路由的本质: 一个路径 path 对应唯一的一个组件 component 当我们访问一个 path 自动把 p

    2024年02月02日
    浏览(43)
  • React 路由react-router-dom详解

    前面我们先了解一下 路由是什么? 路由分类有哪些?内置API有哪些 ? 可能有点枯燥,不喜欢看的直接跳过 ! 单页Web应用(single page web application,SPA)。 整个应用只有一个完整的页面。 点击页面中的链接不会刷新页面,只会做页面的局部更新。 数据都需要通过ajax请求获取

    2023年04月11日
    浏览(42)
  • IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向

    💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! Vue 是一套用于构建 用户界面 的渐进式 JavaScript 框架。 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注 视图层 ,不仅易于上手,还便于与第三方库或既有项目 整合 。另一方面,当

    2024年04月13日
    浏览(140)
  • 探索React Router:实现动态二级路由

    我有一个路由配置的二维数组,想根据这个数组结合路由组件来动态生成路由,应该怎么样实现。在 React Router 6 中渲染二级路由的方式跟 React Router 65相比有一些变化,但核心思路仍然是利用 Route 组件和路由嵌套的方式。下面是具体的步骤: 定义路由数组 注意,这里我们使用

    2024年04月25日
    浏览(30)
  • React-Router路由基础篇(简单易学)

    文章目录 系列文章目录 前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。 (

    2024年04月14日
    浏览(44)
  • React07-路由管理器react-router-dom(v6)

    react-router 是一个流行的用于 React 应用程序路由的库。它使我们能够轻松定义应用程序的路由,并将它们映射到特定的组件,这样可以很容易地创建复杂的单页面应用,并管理应用程序的不同视图。 react-router 是基于 React 构建的,因此与其他 React 库和工具集成得很好。它在许

    2024年02月02日
    浏览(42)
  • React学习——快速上手

    https://php.cn/faq/400956.html 1、可以手动使用npm来安装各种插件,来从头到尾自己搭建环境。 如: 2、脚手架 create-react-app https://react.dev/learn/tutorial-tic-tac-toe 官方文档的井字游戏案例 1、分解组件 2、构建静态版本 可以“自上而下”地构建组件,从层次结构中较高的组件开始构建,

    2024年02月22日
    浏览(36)
  • 从Vue快速上手React

    还没使用过React 的 vue同学可以通过这篇博客快速上手React。 Vue 数据读写: React 数据读写: Vue提供了 watch 帮忙监听数据变化 React提供了 useEffect 帮忙监听数据变化,但请注意,useEffect还有其他用途,并不局限于此 注意:vue中的数据监听watch可以直接获取新旧值,而react中数据

    2024年02月13日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包