几分种学会React Router v6使用

React路由可以实现页面间的切换。
传送门:英文文档
中文教程:
https://www.reactrouter.cn/docs/getting-started/tutorial

1.基础使用

1.安装react-router

npm i react-router-dom@6

2.配置根组件app.js

import { React, lazy, Suspense } from "react";

// 导入 Route, Routes 等核心组件
import { Route, Routes, BrowserRouter ,HashRouter } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import User from "./components/User";
import PageNotFound from "./components/PageNotFound";
import Recommond from "./components/Recommand";
import JapenAnimate from "./components/JapenAnimate";
import ChineseAnimate from "./components/ChineseAnimate";
import NewAnimate from "./components/NewAnimate";

function App() {
  return (
  	<BrowserRouter>
	    <Routes>
	      <Route path="/" element={<Navigate to={<Home />}></Route>
	      <Route path="/home" element={<Home />}>
	        <Route path="/" element={<Navigate to={<Recommond />} />
	        <Route path="recommand" element={<Recommond />} />
	        <Route path="new-animate" element={<NewAnimate />} />
	        <Route path="japan-animate" element={<JapenAnimate />} />
	        <Route path="chinese-animate" element={<ChineseAnimate />} />
	      </Route>
	      <Route path="/user" element={<User />} />
	      <Route path="/about" element={<About />} />
	      <Route path="*" element={<PageNotFound />} />
	    </Routes>
  	</BrowserRouter>
  );
}

export default App;

两种常用Router:BrowserRouter 、HashRouter
作用:包裹整个应用,只要在页面中写在最外层一次就行了。
BrowserRouter (推荐)
使用H5的history.pushState API实现 ,url显示效果(http://localhost:3000/home)
HashRouter
使用URL的哈希值实现,url显示效果(http://localhost:3000/#/home

配置路由语法:

    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/user" element={<User />} />
      <Route path="/about" element={<About />} />
    </Routes>

Routes标签包裹着一个个路由,path对应路径,element对应导入的组件。

配置当无匹配项时,额外的404页面:

 <Route path="*" element={<PageNotFound />} />

4.配置Link链接(如果是导航的话推荐用NavLink)

// 导入NavLink
 import { NavLink } from "react-router-dom";

-------------
 // 使用,to表示跳转链接
  <NavLink to='/home'>

5.配置导航激活状态

1) 设置active的css

Link 或者 NavLink都会被编译成a标签,并且激活时会自带一个active的类,简单的css,我们可以直接设置该a标签的active类属性。

2)通过activeStyle={} api属性设置激活时候的属性。

3)通过回调函数可以设置更复杂的操作(如导航激活图片的更换)

<NavLink to='/home'>
	{(isActive)=>{
		// isActive表示该Link是否处于激活状态
	}
</NavLink>

6. 基本的嵌套路由

用法参考下面

	    <Routes>
	      <Route path="/" element={<Navigate to={<Home />}></Route>
	      <Route path="/home" element={<Home />}>
	        <Route path="/" element={<Navigate to={<Recommond />} />
	        <Route path="recommand" element={<Recommond />} />
	        <Route path="new-animate" element={<NewAnimate />} />
	        <Route path="japan-animate" element={<JapenAnimate />} />
	        <Route path="chinese-animate" element={<ChineseAnimate />} />
	      </Route>
	      <Route path="/user" element={<User />} />
	      <Route path="/about" element={<About />} />
	      <Route path="*" element={<PageNotFound />} />
	    </Routes>

Outlet占位:
注意在使用时,需要配合 Outlet 标签对子路由进行占位,Outlet你可以决定放在父路由页面的任意位置。
语法

import { Outlet } from "react-router-dom";

// 占位
<Outlet />

举个例子:

import TabBar from "../../common/TabBar";
import Tabs from "../Tabs";
import { Outlet } from "react-router-dom";
import SearchBar from "../SearchBar/index";
function Home() {
  return (
    <div>
      <div>
        <SearchBar />
        <Tabs />
        <Outlet />
        <TabBar />
      </div>
    </div>
  );
}
export default Home;

我把Outlet放在tabs的下面,tabbar的上面,就是这种效果:
在这里插入图片描述

默认渲染一级路由 path=‘/’
默认渲染二级路由,去掉path,添加index属性。

 <Route index element={<Recommond />} />

2.进阶使用

编程式导航跳转

作用:通过js编程的方式进行路由页面跳转,比如从登录界面跳转到关于页。
语法说明:
1.导入useNavigate钩子函数
2.执行钩子函数得到跳转函数
3.执行跳转函数完成跳转

注意:如果在跳转时不想加历史记录,可以添加额外参数replace为true

import { useNavigate } from "react-router-dom";
------------------------
  const navigate = useNavigate();
  const goHome = () => {
    navigate("/home", { replace: true });
  };
------------------------------
      <button onClick={goHome}></button>

跳转携带参数:有时候不光需要跳转还需要传递参数。

  1. searchParams
    传参
navigate('/about?id=1001')

取参

let [params] = useSearchParams()
let id = params.get('id')
  1. params 传参
    传参
navigate('/about/1001')

取参

let params = useParams()
let id = params.id

懒加载路由

详细用法参考下面抽离路由配置文件以及编写路由渲染函数

import { lazy ,Suspense} from "react";

// 示例
    Component: lazy(() => import("@/pages/User")),
// 示例
		<Route
          key={path}
          path={path}
          element={
            <Suspense fallback={<div>加载中</div>}>
              <Component />
            </Suspense>
          }
        />

抽离路由配置文件

// 路由配置列表
export const routeList = [
  {
    labe: "首页",
    path: "/",
    Component: lazy(() => import("@/pages/Home")),
    roles: [USER_ROLES.ADMIN, USER_ROLES.TEST],
    redirect: "/home/recommend",
    children: [
      {
        labe: "推荐",
        path: "home/recommend",
        Component: lazy(() => import("@/pages/Home/components/Recommend")),
        roles: [USER_ROLES.ADMIN],
      },
      {
        labe: "新番",
        path: "home/new-animate",
        Component: lazy(() => import("@/pages/Home/components/NewAnimate")),
      },
      {
        labe: "日漫",
        path: "home/japan-animate",
        Component: lazy(() => import("@/pages/Home/components/JapenAnimate")),
      },
      {
        labe: "国漫",
        path: "home/chinese-animate",
        Component: lazy(() => import("@/pages/Home/components/ChineseAnimate")),
      },
    ],
  },
  {
    labe: "排行",
    path: "/rank",
    Component: lazy(() => import("@/pages/About")),
    children: [],
  },
  {
    labe: "我的",
    path: "/user",
    Component: lazy(() => import("@/pages/User")),
    children: [],
  },
  {
    key: "404",
    labe: "404页面",
    path: "*",
    Component: lazy(() => import("@/pages/PageNotFound")),
    children: [],
  },
];

编写渲染路由函数

// 渲染路由配置的方法
export const renderRoutes = (routes) => {
  if (routes && routes?.length > 0) {
    return routes?.map(({ path, Component, redirect, children }) => {
      return children && children?.length > 0 ? (
        <Route
          key={path}
          path={path}
          element={
            <Suspense fallback={<div>加载中...</div>}>
              <Component />
            </Suspense>
          }
        >
          {/* 递归渲染子路由 */}
          {renderRoutes(children)}
          {/* 重定向以及重定向的兜底 */}
          {redirect ? (
            <>
              <Route path={path} element={<Navigate to={redirect} />}></Route>
              <Route
                path={children[0].path.split("/")[0]}
                element={<Navigate to={redirect} />}
              />
            </>
          ) : (
            <>
              <Route
                path={path}
                element={<Navigate to={children[0].path} />}
              ></Route>
              <Route
                path={children[0].path.split("/")[0]}
                element={<Navigate to={children[0].path.split("/")[1]} />}
              />
            </>
          )}
        </Route>
      ) : (
        <Route
          key={path}
          path={path}
          element={
            <Suspense fallback={<div>加载中</div>}>
              <Component />
            </Suspense>
          }
        />
      );
    });
  }
};

整合Link使用

有空了再写。。。。

更多好文章传送门:https://www.cnblogs.com/operate/p/16082907.html
https://www.jianshu.com/p/e50011ce67cc

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/12825.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++ -3- 类和对象 (中) | 构造函数与析构函数(一)

文章目录 1.类的6个默认成员函数2.构造函数3.析构函数构造函数与析构函数应用场景缺省值初始化 1.类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&#xff0c;编译器会自…

【文章学习系列之模型】FEDformer

本章内容 文章概况模型流程主要结构Frequency Enhanced Decomposition Architecture&#xff08;频率增强分解结构&#xff09;Fourier enhanced blocks and Wavelet enhanced blocks&#xff08;傅里叶增强模块和小波增强模块&#xff09;Fourier Enhanced Structure&#xff…

【Java 数据结构】优先级队列 (堆)

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了 博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点!人生格言&#xff1a;当你的才华撑不起你的野心的时候,你就应该静下心来学习! 欢迎志同道合的朋友一起加油喔&#x1f9be;&am…

快速精简软件,如何让软件缩小到原来的5%大小,从删除文件入手,到修改C++引用库,合规解决存储问题

Hi~大家好&#xff0c;今天制作一个简单的精简软件的教学~ 事先说明下&#xff0c;精简软件并不违反任何规定&#xff0c;尤其是开源软件&#xff0c;这里也仅讨论开源软件的修改&#xff0c;根据几乎所有开源软件的开源规则&#xff0c;精简软件&#xff0c;本质也就是修改软件…

戴尔G3 Ubuntu18.04双系统安装

ROS学习需要使用Linux系统&#xff0c;首先就是Ubuntu&#xff0c;我选择的是18.04.6这个版本&#xff0c;因为后面我要使用以Jetson Nano为主控的Jetbot进行ROS编程&#xff0c;Jetbot所带的出厂镜像就是18.04&#xff0c;为了方便程序移植&#xff0c;以及减少不必要的麻烦。…

【消息队列】聊一下Kafka副本机制

副本机制的好处 副本在分布式系统下&#xff0c;不同的网络互联的机器保存同一份数据。我们知道在分布式系统中&#xff0c;都会通过数据镜像、数据冗余的方式来提升高可用性。 提供数据冗余&#xff1a;这点比较好理解&#xff0c;说白了就是通过数据冗余在不同的服务器上&a…

大家副业都在做什么?csgo搬砖靠谱的副业推荐给你

从来没想过&#xff0c;以前只会玩CSGO的男孩子&#xff0c;现在居然能借助游戏赚到钱了&#xff01;甚至不需要什么专业的技巧&#xff0c;简简单单 在steam平台选择有利润的道具后&#xff0c;再上架到国内网易BUFF平台&#xff0c;赚取“信息差”差价而已&#xff01; 谁大…

SpringCloud学习(六)——Feign的简单使用

文章目录 1. Feign 的使用1.1 引入依赖1.2 添加注解1.3 编写Feign客户端1.4 测试 2. Feign中的自定义配置2.1.配置文件方式2.2.Java代码方式 3. Feign 性能优化4. Feign的抽取式使用4.1 抽取配置4.2 引入依赖4.3 指明Client 在此之前&#xff0c;我们服务之间需要进行调用的时候…

读懂MAC地址

MAC地址是一种用于标识计算机网络设备的唯一地址。它是由48个二进制数字组成的&#xff0c;通常表示为12个十六进制数字&#xff0c;每两个数字之间用冒号或连字符分隔开。MAC地址由设备制造商在生产过程中分配&#xff0c;以确保网络上每个设备都有唯一的标识符。 MAC地址的规…

第11章_常用类和基础API

第11章_常用类和基础API 讲师&#xff1a;尚硅谷-宋红康&#xff08;江湖人称&#xff1a;康师傅&#xff09; 官网&#xff1a;http://www.atguigu.com 本章专题与脉络 1. 字符串相关类之不可变字符序列&#xff1a;String 1.1 String的特性 java.lang.String 类代表字符串…

【大数据之Hadoop】十七、MapReduce之数据清洗ETL

ETL是将业务系统的数据经过抽取、清洗转换之后加载到数据仓库的过程&#xff0c;目的是将分散、零乱、标准不统一的数据整合到一起&#xff0c;为决策提供分析依据。 ETL的设计分三部分&#xff1a;数据抽取、数据的清洗转换、数据的加载。 1 ETL体系结构 ETL主要是用来实现…

LLM总结(持续更新中)

引言 当前LLM模型火出天际&#xff0c;但是做事还是需要脚踏实地。此文只是日常学习LLM&#xff0c;顺手整理所得。本篇博文更多侧重对话、问答类LLM上&#xff0c;其他方向&#xff08;代码生成&#xff09;这里暂不涉及&#xff0c;可以去看综述来了解。 之前LLM模型梳理 …

龙芯中科官方宣布,龙芯中科企业办公信息化平台全面完成国产化替代

4月4日&#xff0c;龙芯中科官方宣布&#xff0c;龙芯中科企业办公信息化平台全面完成国产化替代。龙芯 ERP 系统全系统使用国产化平台&#xff0c;私有化部署于基于龙芯 3C5000 服务器集群的虚拟化云平台上&#xff0c;使用自研 Loongnix 操作系统、自研 LoongDB 数据库及龙芯…

【SQL Server】无需公网IP,就可以远程连接SQL Server数据库

目录 1.前言 2.本地安装和设置SQL Server 2.1 SQL Server下载 2.2 SQL Server本地连接测试 2.3 Cpolar内网穿透的下载和安装 2.3 Cpolar内网穿透的注册 3.本地网页发布 3.1 Cpolar云端设置 3.2 Cpolar本地设置 4.公网访问测试 5.结语 1.前言 数据库的重要性相信大家…

Redis-----什么是Redis?

什么是Redis&#xff1f; redis是一个基于内存的key-value结构数据库。 基于内存存储&#xff0c;读写性能高适合存储热点数据&#xff08;热点商品、资讯、新闻&#xff09;企业应用广泛 Redis入门 redis简介 redis是一个开源的内存中的数据结构存储系统&#xff0c;数据库…

哪个洗脱一体机好用?好用的洗拖一体机推荐

洗地机是一款使用非常方便的清洁工具&#xff0c;通常可以实现吸、拖、洗三个功能&#xff0c;对于各类家庭污渍都有着不错的处理能力&#xff0c;无论是干燥垃圾还是潮湿垃圾一律可以有效清理。不过很多新手朋友在选购洗地机时会因为看不懂参数而频繁踩雷。本文为大家整理了洗…

详解语义分割deeplabv3+模型的工业应用流程

来源&#xff1a;投稿 作者&#xff1a;某一个名字 编辑&#xff1a;学姐 导语 在工业视觉应用中&#xff0c;目标检测算法常用于特征的粗定位&#xff0c;而语义分割则在特征的精定位方面有着突出的表现。使用较多的语义分割模型主要有FCN、deeplab系列、unet等&#xff0c;根…

keil5使用c++编写stm32控制程序

keil5使用c编写stm32控制程序 一、前言二、配置图解三、std::cout串口重定向四、串口中断服务函数五、结尾废话 一、前言 想着搞个新奇的玩意玩一玩来着&#xff0c;想用c编写代码来控制stm32&#xff0c;结果在keil5中&#xff0c;把踩给我踩闷了&#xff0c;这里简单记录一下…

【OCR】CTC loss原理

1 CTC loss出现的背景 在图像文本识别、语言识别的应用中&#xff0c;所面临的一个问题是神经网络输出与ground truth的长度不一致&#xff0c;这样一来&#xff0c;loss就会很难计算&#xff0c;举个例子来讲&#xff0c;如果网络的输出是”-sst-aa-tt-e’, 而其ground truth…

深入剖析:如何优化Android应用的性能和内存管理

深入剖析&#xff1a;如何优化Android应用的性能和内存管理 性能和内存管理的重要性 在今天的移动应用开发中&#xff0c;用户对于应用的性能和体验要求越来越高。一款性能卓越的Android应用能够提供流畅的操作体验、快速的响应速度以及较低的资源消耗&#xff0c;从而提高用户…