React 路由react-router-dom详解

news2024/11/18 11:19:23

React 路由react-router-dom详解

( 路由嵌套 + 路由传参 + 路由权限 + 路由优化 按需导入 + 404页面 )

前面我们先了解一下 路由是什么？ 路由分类有哪些？内置API有哪些？
可能有点枯燥，不喜欢看的直接跳过！

1，相关理解

  1. 单页Web应用（single page web application，SPA）。
  2. 整个应用只有一个完整的页面。
  3. 点击页面中的链接不会刷新页面，只会做页面的局部更新。
  4. 数据都需要通过ajax请求获取, 并在前端异步展现。

2，路由的理解：

1. 什么是路由?

  1. 一个路由就是一个映射关系(key:value)
  2. key为路径, value可能是function或component

2，react-router-dom的理解：

  1. react的一个插件库。
  2. 专门用来实现一个SPA应用。
  3. 基于react的项目基本都会用到此库。

一，基本路由使用：

先看看效果：

在这里插入图片描述

1，下载安装：

  1. win + R

  2. cmd 打开
    在这里插入图片描述

  3. cd/react项目文件目录
    在这里插入图片描述

  4. 安装：

 npm  i react-router-dom -S

在这里插入图片描述

很好，你已经完成了，安装！

二， 接下来是使用路由的步骤

文件
在这里插入图片描述

1， 创建页面

在 src路径下新建views文件，页面组件新建在这里面

在这里插入图片描述

2，新建路由文件

在 src路径下 新建router文件夹，在这里配置路由

在这里插入图片描述

3，配置路由文件：

在 router路径下 新建index.jsx文件夹，在这里配置路由

在这里插入图片描述

  1. 导入路由依赖
// 导入路由依赖
import { useRoutes } from "react-router-dom";
  1. 导入所需组件，首页 关于
// 导入所需组件，首页  关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
  1. 创建路由
// 创建路由
const routes = [
  {
    path: "/",
    element: (<HomeView></HomeView>)
  },
  {
    path: "/about",
    element: (<AboutView ></AboutView >)
  },
];
  1. 使用useRoutes 创建，导出路由
// 使用useRoutes 创建
export default function RouterView() {
  // 创建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}

完整代码：
在这里插入图片描述

以上配置是路由基础配置：
这样还是看不到效果的，要配置导航使用路由

4，使用并切换路由，配置App.jsx文件：

路径：src / App.jsx

  1. 导入：
import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom";

Router： 路由

RouterView： 路由组件 ，导入路由文件

HashRouter： 哈希路由

NavLink： 导航链接

  1. 使用，配置导航链接，这里使用 函数组件：

全部代码：

import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom";

function App() {
  return (
    <Router>
      <NavLink to="/">首页</NavLink> &emsp;||&emsp;
      <NavLink to="/about">关于</NavLink> &emsp;||&emsp;
      <RouterView />
    </Router>
  );
}

export default App;
  1. 效果图：
    在这里插入图片描述

三， 路由传参：

1，路由文件配置：

在这里插入图片描述

2，组件使用：

ProductView.jsx文件配置：

  1. 引入useParams

这里我新建了一个组件 ProductView.jsx

 import { useParams } from "react-router-dom"
  1. 获取参数
  const { id } = useParams()
  1. 渲染参数：
    <h1>产品参数：{id}</h1>

ProductView.jsx 文件代码：

在这里插入图片描述

App.jsx 文件配置：

传参：

<NavLink to="/product/123">产品123</NavLink> &emsp;||&emsp;
<NavLink to="/product/456">产品456</NavLink> &emsp;||&emsp;

App.jsx 文件代码：

在这里插入图片描述

效果：
在这里插入图片描述

四， 路由嵌套：

  1. 路由文件配置：src / router / index.jsx
// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件，首页  关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";
// 组件嵌套组件
import Private from "./Private";
// 创建路由
const routes = [
  {
    path: "/",
    element: <HomeView></HomeView>
  },
  {
    path: "/about",
     element: <AboutView></AboutView>
  },
  {
    path: "/product/:id",
    element: <ProductView></ProductView>
  },
  {
    path: "/admin",
    element:  <AdminView />
    // 配置子路由
    children: [
      {
        path: "",
        element: <DashView></DashView>
      },
      {
        path: "orderlist",
        element: <OrderList></OrderList>
      }
    ]
  },


// 使用useRoutes 创建
export default function RouterView() {
  // 创建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}
  1. 组件文件配置：

新建文件 以下图：
在这里插入图片描述

views / AdminView.jsx文件：

import { NavLink, Outlet } from "react-router-dom";
function AdminView() {
  return (
    <div>
      <h3>管理页面</h3>
      <NavLink to="">管理页面</NavLink>&emsp;||&emsp;
      <NavLink to="orderlist">概览页面</NavLink>
      <Outlet />
    </div>
  );
}
export default AdminView;

NavLink ：导航链接
Outlet： 子组件容器

views / DashView.jsx文件：

function DashView() {
    return ( <div>
        <h3>概览页面内容</h3>
    </div> );
}
export default DashView;

views / OrderList.jsx文件：

function OrderList() {
    return (<div>
        <h3>管理页面内容</h3>
    </div>);
}
export default OrderList;

效果图：

在这里插入图片描述

五， 路由查询参数：

1， App.jsx文件 导航配置：

在这里插入图片描述
代码：

import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom"

function App() {
    return (<Router>
        <NavLink to="/">首页</NavLink >  &emsp;||&emsp;
        <NavLink to="/about">关于</NavLink> &emsp;||&emsp;
        <NavLink to="/admin">admin页面</NavLink> &emsp;||&emsp;
        <NavLink to="/product/123">产品123</NavLink> &emsp;||&emsp;
        <NavLink to="/product/456">产品456</NavLink> &emsp;||&emsp;
        <NavLink to="/about?redirect=hello">产品hello</NavLink> &emsp;||&emsp;
        <NavLink to="/about?redirect=word">产品word</NavLink> &emsp;||&emsp;
        <RouterView></RouterView>
    </Router>);
}
export default App;

传参：?redirect= “ 传的查询参数 ”

2，AboutView.jsx 文件：

代码：

import { useSearchParams, NavLink, useNavigate, useLocation } from "react-router-dom"
function AboutView() {
    // 获取about查询参数redirect的值
    const [SearchParams] = useSearchParams()
    // 获取redirect的值
    const redirect = SearchParams.get('redirect')
    // 渲染
    return (<div>
         {/* // 传递查询参数 */}
        <h1>About页面查询参数：-{redirect}</h1>
    </div>);
}

// 导出组件
export default AboutView;

六，组件按需导入（懒加载）：

用于 性能优化。
lazy方法， subspense组件

1，定义懒加载组件router / LazyLoad.jsx

// 动态加载组件
import { lazy, Suspense } from "react";
// 动态加载组件 方法
function LazyLoad(url) {
  // 配置动态加载组件路径
  const Element = lazy(() => import(url));
  return (
    // 返回组件，Suspense:懒加载组件
    <Suspense fallback={<h3>加载中. . . </h3>}>
      {/* 内容组件 */}
      <Element />
    </Suspense>
  );
}
// 导出方法
export default LazyLoad;

2，路由router / index.jsx文件使用：

引入：
// 导入懒加载组件方法
import LazyLoad from "./LazyLoad";
使用：
element: LazyLoad("../views/HomeView")

router / index.jsx文件 代码：

// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件，首页  关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";

// 创建路由
const routes = [
  {
    path: "/",
    element: ("../views/HomeView")
  },
  {
    path: "/about",
    element: ("../views/AboutView")
  },
  {
    path: "/product/:id",
    element: ("../views/ProductView")
  },
  {
    path: "/admin",
    element:  <Private><AdminView /></Private>,
    // 配置子路由
    children: [
      {
        path: "",
        element: <DashView></DashView>
      },
      {
        path: "orderlist",
        element: <OrderList></OrderList>
      }
    ]
  },

];
// 使用useRoutes 创建
export default function RouterView() {
  // 创建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}

效果图：

按需加载

在这里插入图片描述

七，路由权限：

类似于Vue里的路由守卫：未登陆 不能打开一些页面
有权限返回子组件，没有权限跳转到登录

1，定义权限组件router/Private.jsx

本地存储有 token，就有权限，
没有token，就没有权限

import {Navigate} from "react-router-dom"
// 权限路由
function Private(props) {
    if(localStorage.getItem("token")) {
        return <>{props.children}</> ;
    }else {
        return <Navigate to="/" />
    }
}

export default Private;

2，路由index . jsx文件使用：

权限组件包裹着 内容组件
element: < Private>< AdminView /></ Private>,

// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件，首页  关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";
import Private from "./Private";
import LazyLoad from "./LazyLoad";
// 创建路由
const routes = [
  {
    path: "/",
    element: LazyLoad("../views/HomeView")
  },
  {
    path: "/about",
    element: LazyLoad("../views/AboutView")
  },
  {
    path: "/product/:id",
    element: LazyLoad("../views/ProductView")
  },
  {
    path: "/admin",
    element:  <Private><AdminView /></Private>,
    // 配置子路由
    children: [
      {
        path: "",
        element: <DashView></DashView>
      },
      {
        path: "orderlist",
        element: <OrderList></OrderList>
      }
    ]
  },

];
// 使用useRoutes 创建
export default function RouterView() {
  // 创建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}

效果图：

在这里插入图片描述

八，设置404错误页面：

1，新建404组件文件 src / views / NoMatch.jsx :

import { NavLink } from "react-router-dom"
function NoMatch() {
    return (<div>
        <h1>你的页面被😽偷走了!</h1>
        <NavLink to="/">首页</NavLink>
    </div>);
}
export default NoMatch;

2，路由配置，src / router / index.jsx :

// 配置404页面
{
path: “*”,
element:
}
path 值为 *

// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件，首页  关于
import NoMatch from "../views/NoMatch";
import HomeView from "../views/HomeView";
// import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";
// 导入权限组件
import Private from "./Private";
// 导入懒加载组件方法
import LazyLoad from "./LazyLoad";
// 创建路由
const routes = [
  {
    path: "/",
    element: LazyLoad("../views/HomeView")
  },
  {
    path: "/about",
    element: LazyLoad("../views/AboutView")
  },
  {
    path: "/product/:id",
    element: LazyLoad("../views/ProductView")
  },
  {
    path: "/admin",
    element: ( <Private><AdminView /></Private>),
    // 配置子路由
    children: [
      {
        path: "",
        element: <DashView/>
      },
      {
        path: "orderlist",
        element: <OrderList/>
      }
    ]
  },
  // 配置404页面
  {
    path: "*",
    element: <NoMatch />
  }
];

// 使用useRoutes 创建
export default function RouterView() {
  // 创建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}

效果图：

在这里插入图片描述

总结：

路由组件与方法：

  1. 组件

    < HashRouter> 哈希路由
    < BrowserRouter> 浏览器路由
    < NavLink> 导航链接
    选中会有active 类名
    < Link>导航链接
    < OutLet>子路由容器

  2. 方法

    useRoutes使用路由配置
    useParams() 路由参数
    useSearchParams() 获取查询参数

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2023年软考中级网络工程师考试大纲

2023年软考中级网络工程师考试大纲

1.考试目标 通过本考试的合格人员能根据应用部门的要求进行网络系统的规划、设计和网络设备的软硬件安装调试工作&#xff0c;能进行网络系统的运行、维护和管理&#xff0c;能高效、可靠、安全地管理网络资源&#xff0c;作为网络专业人员对系统开发进行技术支持和指导&#…
阅读更多...
几十个简要的游戏案例分析

几十个简要的游戏案例分析

文章目录 一、 介绍二、 影响游戏体验的因素三、 游戏能爆火的因素1.影响游戏爆火因素的排名2.玩游戏的两种经典心理3.经典案例分析Qq农场植物大战僵尸水果忍者召唤神龙羊了个羊 4.游戏公司可借鉴的经验 四、 几十款游戏的多方面分析FC红白游戏机十二人街霸热血高校系列魂斗罗系…
阅读更多...
vsftpd 3.0.3升级到3.0.5后的坑

vsftpd 3.0.3升级到3.0.5后的坑

1、问题描述 vsftpd 3.0.3升级到3.0.5后&#xff0c;Java ftps连接不成功&#xff0c;报以下错误&#xff1a; javax.net.ssl.SSLHandshakeException: Remote host terminated the handshakeat java.base/sun.security.ssl.SSLSocketImpl.handleEOF(SSLSocketImpl.java:1715…
阅读更多...
Java日志处理

Java日志处理

日志 日志就是Logging&#xff0c;它的目的是为了取代System.out.println() 输出日志&#xff0c;而不是用System.out.println()&#xff0c;有以下几个好处&#xff1a; &#xff08;1&#xff09;可以设置输出样式&#xff0c;避免自己每次都写“ERROR: ” var &#xff0…
阅读更多...
故障分析 | 一次规律的 MySQL 主从延迟跳变

故障分析 | 一次规律的 MySQL 主从延迟跳变

作者&#xff1a;李彬 爱可生 DBA 团队成员&#xff0c;负责项目日常问题处理及公司平台问题排查。爱好有亿点点多&#xff0c;吉他、旅行、打游戏… 本文来源&#xff1a;原创投稿 *爱可生开源社区出品&#xff0c;原创内容未经授权不得随意使用&#xff0c;转载请联系小编并注…
阅读更多...
WxGL应用实例：绘制高精度的3D太阳系模型

WxGL应用实例：绘制高精度的3D太阳系模型

文章目录 1 坐标系的选择1.1 黄道坐标系1.2 三维空间直角坐标系 2 使用JPL星历表计算轨道2.1 日期时间2.2 特定时刻天体的位置2.3 天体运行轨道 3 太阳系模型3. 1 全家福3.2 时间、距离和半径的缩放3.3 黄道坐标系模型 天何所沓&#xff1f;十二焉分&#xff1f;日月安属&#…
阅读更多...
拆解Open ODS View和HANA Composite Provider

拆解Open ODS View和HANA Composite Provider

这两个也不是新面孔了。 那么OODS和HCPR到底他俩怎么用&#xff1f;既然大家都是虚拟的&#xff0c;不占地方。那这俩infoprovider到底有啥区别&#xff1f; 首先就是目的不同。 HCPR是可以用Union和Join。也就是老的Multiprovider和InfoSet。Union就是说两个数据集的行能被…
阅读更多...
UniLM模型简单介绍

UniLM模型简单介绍

目录 一、概要 二、深入扩展 2.1 预训练任务 2.2 模型精调 一、概要 如果将基于Transformer的双向语言模型&#xff08;如BERT模型中的掩码语言模型&#xff09;与单向的自回归语言模型&#xff08;如BART模型的解码器&#xff09;进行对比&#xff0c;可以发现&#xff0c…
阅读更多...
常见的注册中心Nacos、Eureka

常见的注册中心Nacos、Eureka

常见的注册中心 1.Eureka&#xff08;原生&#xff0c;2.0遇到瓶颈&#xff0c;停止维护&#xff09; 2.Zookeeper&#xff08;支持&#xff0c;专业的独立产品。例如&#xff1a;dubbo&#xff09; 3.Consul&#xff08;原生&#xff0c;GO语言开发&#xff09; 4.Nacos …
阅读更多...
中国社科院与美国杜兰大学金融管理硕士项目——在职读研的日子里藏着我们未来无限可能

中国社科院与美国杜兰大学金融管理硕士项目——在职读研的日子里藏着我们未来无限可能

人生充满期待&#xff0c;梦想连接着未来。每一天都可以看作新的一页&#xff0c;要努力去成为最好的自己。在职读研的光阴里藏着无限的可能&#xff0c;只有不断的努力&#xff0c;不断的强大自己&#xff0c;未来会因为你的不懈坚持而发生改变&#xff0c;纵使眼前看不到希望…
阅读更多...
算法---统计参与通信的服务器

算法---统计参与通信的服务器

题目 这里有一幅服务器分布图&#xff0c;服务器的位置标识在 m * n 的整数矩阵网格 grid 中&#xff0c;1 表示单元格上有服务器&#xff0c;0 表示没有。 如果两台服务器位于同一行或者同一列&#xff0c;我们就认为它们之间可以进行通信。 请你统计并返回能够与至少一台其…
阅读更多...
【C语言】调试工具GDB简述

【C语言】调试工具GDB简述

一、说明 GDB&#xff08;GNU Debugger&#xff09;是UNIX及UNIX-like下的强大调试工具&#xff0c;可以调试ada, c, c, asm, minimal, d, fortran, objective-c, go, java,pascal等语言。本文介绍GDB启动调试的方式。 二、Ubuntu上安装gdb。 在root用户权限下&#xff1a; roo…
阅读更多...
【通过蓝牙滚动文本和Android控制】

【通过蓝牙滚动文本和Android控制】

【通过蓝牙滚动文本和Android控制】 1. 概述2. MAX72193. 电路原理图4. MAX7219基本Arduino代码5. 88 LED矩阵滚动Arduino代码6. 用于通过蓝牙控制 88 LED 矩阵的安卓应用程序1. 概述 我们将做三个例子，第一个例子我们将解释MAX7219的基本工作原理，在第二个例子中，我们将看…
阅读更多...
scala控制抽象之传名参数（名调用）

scala控制抽象之传名参数（名调用）

我们在用scala定义函数时&#xff0c;一般参数都是各种类型的值&#xff0c;这是常见的值调用 但偶尔也有需要把代码块作为参数传入的情况&#xff08;名调用&#xff09; 匿名函数经常可以作为函数的参数传入&#xff0c;非匿名函数也行&#xff08;函数作为返回值返回就更常见…
阅读更多...
都说软件测试不行了，真的是这样吗？

都说软件测试不行了，真的是这样吗？

最近在各大平台经常会听到大家说这样的话&#xff1a; 现在公司都不招人&#xff0c;测试员根本找不到工作 简历石沉大海、面试机会也没有&#xff0c;软件测试是不是不行了 软件测试行情到底如何&#xff1f; 作为软件员在如今的情况下又该怎么做&#xff1f; 其实现在所…
阅读更多...
ai生成文章 免费-自动生成文章

ai生成文章 免费-自动生成文章

原创文章自动生成器 随着人工智能技术的快速发展&#xff0c;越来越多的创新产品得以应用到我们的日常工作中。其中&#xff0c;原创文章自动生成器是一种高效、智能的工具&#xff0c;它可以帮助企业快速生成符合要求的优质文章。在本文中&#xff0c;我将向您介绍原创文章自…
阅读更多...
数据结构算法leetcode刷题练习(1)

数据结构算法leetcode刷题练习(1)

给定一个三角形 triangle &#xff0c;找出自顶向下的最小路径和。 每一步只能移动到下一行中相邻的结点上。相邻的结点 在这里指的是 下标 与 上一层结点下标 相同或者等于 上一层结点下标 1 的两个结点。也就是说&#xff0c;如果正位于当前行的下标 i &#xff0c;那么下一…
阅读更多...
4.2 插值多项式的求法

4.2 插值多项式的求法

学习目标&#xff1a; 我会采取以下几个步骤来学习插值多项式的求法&#xff1a; 学习预备知识&#xff1a;插值多项式的求法需要掌握一定的数学知识&#xff0c;例如多项式函数的定义、导数、微积分、线性代数等等。因此&#xff0c;学习插值多项式的求法前&#xff0c;需要先…
阅读更多...
掘金AIGC时代，开发者更需要什么样的大模型？

掘金AIGC时代，开发者更需要什么样的大模型？

当前&#xff0c;火热的AI大模型领域需要一些冷思考。 自去年年底ChatGPT掀起一轮AIGC热潮以来&#xff0c;国内科技企业扎堆发布大模型和类ChatGPT产品。截止2023年4月&#xff0c;已公开宣布发布或即将发布AI大模型的企业达数十家。多模态大模型的能力不断迭代&#xff0c;市…
阅读更多...
2023年自动化测试真有那么重要吗？内卷严重，测试技能水涨船高......

2023年自动化测试真有那么重要吗？内卷严重，测试技能水涨船高......

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 学习自动化测试有…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023