【react】React Router基础知识

1. 基础用法

npm i react-router-dom

通过浏览器地址栏的切换，可以实现不同组件之间的切换。

import React from "react";
import ReactDOM from "react-dom/client";
// import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { createBrowserRouter,RouterProvider } from "react-router-dom";// 创建路由
const router = createBrowserRouter([{path:'/login',element:<div>我是登录页</div>
},{path:'/article',element:<div>我是文章页</div>
}])// 将App组件渲染到id为root的DOM元素中
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<React.StrictMode><RouterProvider router={router}></RouterProvider></React.StrictMode>
);
reportWebVitals();

在这里插入图片描述
在这里插入图片描述
进一步将组件单独抽离：
在这里插入图片描述
/pages/Article/index.js

const Article = () =>{return (<div>我是文章页</div>)
}
export default Article;

/pages/Login/index.js

import { Link } from "react-router-dom";const Login = () => {return (<div>我是登录页</div>);
};
export default Login;

/router/index.js

import { createBrowserRouter } from "react-router-dom";import Login from "../pages/Login";
import Article from "../pages/Article";const router = createBrowserRouter([{path: "/login",element:<Login/>},{path: "/article",element: <Article/>},
]);export default router;

/index.js

import React from "react";
import ReactDOM from "react-dom/client";
// import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { RouterProvider } from "react-router-dom";
import router from './router/index'// 将App组件渲染到id为root的DOM元素中
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<React.StrictMode><RouterProvider router={router}></RouterProvider></React.StrictMode>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

2. 路由导航跳转

2.1 声明式导航

声明式导航是指通过在模版中通过<Link/>组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行。

通过给组件的to属性指定要跳转到路由path，组件会被渲染为浏览器支持的a链接，如果需要传参直接通过字符串拼接的方式拼接参数。

/pages/Login/index.js

import { Link } from "react-router-dom";const Login = () => {return (<div><div>我是登录页</div><Link to="/article">去文章页</Link></div>);
};
export default Login;

2.2 编程式导航

编程式导航是指通过useNavigate 钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，比如想在登录请求完毕之后跳转就可以选择这种方式，更加灵活。

通过调用navigate方法传入地path实现跳转。

//pages/Login/index.js 
import { useNavigate} from "react-router-dom";const Login = () => {const navigate = useNavigate()return (<div><div>我是登录页</div><button onClick={() =>navigate('/article')}>去文章页</button></div>);
};
export default Login;

2.3 路由导航传参

searchParams传参

在路径后面拼接? 进行参数传递，多个参数以&分隔。

//pages/Login/index.js 
import { useNavigate} from "react-router-dom";const Login = () => {const navigate = useNavigate()return (<div><div>我是登录页</div>{/* 路由跳转并传参 */}<button onClick={() =>navigate('/article?id=1001&name=张三')}>去文章页</button></div>);
};
export default Login;

使用useSearchParams来获取传递过的的params参数

///pages/Article/index.js
import { useSearchParams } from "react-router-dom";
const Article = () => {const [params] = useSearchParams();const id = params.get("id");const name = params.get("name");return (<><div>我是文章页</div><div>{id}-{name}</div></>);
};
export default Article;

params传参

router路径配置时，需要提供传参字段的占位符。
获取路由传参时，使用useParams 拿到传参对象。

//pages/Login/index.js 
import { createBrowserRouter } from "react-router-dom";import Login from "../pages/Login";
import Article from "../pages/Article";const router = createBrowserRouter([{path: "/login",element:<Login/>},{path: "/article/:id/:name",element: <Article/>},
]);export default router;

//pages/Login/index.js
import { Link ,useNavigate} from "react-router-dom";const Login = () => {const navigate = useNavigate()return (<div><div>我是登录页</div>{/* 路由跳转并传参 */}<button onClick={() =>navigate('/article/1001/张三')}>去文章页</button></div>);
};
export default Login;

//pages/Article/index.js
import { useParams } from "react-router-dom";
const Article = () => {const params = useParams();const { id, name } = params;return (<><div>我是文章页</div><div>{id}-{name}</div></>);
};
export default Article;

2.4 嵌套路由配置

1.使用 children 属性配置路由嵌套关系
2.使用<Outlet/>组件配置二级路由渲染位置

// router/index.js
import { createBrowserRouter } from "react-router-dom";import Login from "../pages/Login";
import Article from "../pages/Article";
import Layout from "../pages/Layout";
const router = createBrowserRouter([{path: "/",element: <Layout />,children: [{path: "/login",element: <Login />,},{path: "/article",element: <Article />,},],},
]);export default router;

// pages/Layout/index.js
import { Link,Outlet } from "react-router-dom";
const Layout = () => {return (<div><h1>Layout</h1><Link to="/login">登录页面</Link>&nbsp;<Link to="/article">文章页面</Link>{/* 配置二级路由的出口 */}<Outlet/></div>);
};
export default Layout;

在这里插入图片描述

设置默认二级路由

设置默认二级路由的index为true，取消path路径设置

// router/index.js
import { createBrowserRouter } from "react-router-dom";import Login from "../pages/Login";
import Article from "../pages/Article";
import Layout from "../pages/Layout";
const router = createBrowserRouter([{path: "/",element: <Layout />,children: [{// 设置默认二级路由index: true,element: <Login />,},{path: "/article",element: <Article />,},],},
]);export default router;

默认二级路由跳转路径为/

// pages/Layout/index.js
import { Link, Outlet } from "react-router-dom";
const Layout = () => {return (<div><h1>Layout</h1><Link to="/">登录页面</Link>&nbsp;<Link to="/article">文章页面</Link>{/* 配置二级路由的出口 */}<Outlet /></div>);
};
export default Layout;

在这里插入图片描述

2.5 404路由配置

当浏览器输入url的路径在整个路由配置中都找不到对应的 path，为了用户体验，可以使用 404 兜底组件进行
渲染。
1.准备一个NotFound组件
2.在路由表数组的末尾，以*号作为路由path配置路由

//router/index.js
import { createBrowserRouter } from "react-router-dom";import Login from "../pages/Login";
import Article from "../pages/Article";
import Layout from "../pages/Layout";
import NotFound from "../pages/NotFound";const router = createBrowserRouter([{path: "/",element: <Layout />,children: [{// 设置默认二级路由index: true,element: <Login />,},{path: "/article",element: <Article />,},],},{// 404路由配置path:'*',element: <NotFound />}
]);export default router;

//pages/NotFound/index.js
const NotFound = () => {return (<div><h1>404</h1><p>页面未找到</p></div>);
};export default NotFound;

3. ReactRouter两种路由模式

各个主流框架的路由常用的路由模式有两种，history模式和hash模式, ReactRouter分别由 createBrowerRouter 和createHashRouter 函数负责创建。
在这里插入图片描述

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

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

相关文章

std::back_inserter

std::back_inserter

std::back_inserter 是 C 标准库中的一个函数模板&#xff0c;它用于创建一个插入迭代器&#xff08;insert iterator&#xff09;&#xff0c;这个迭代器可以在容器末尾插入新元素。它定义在 <iterator> 头文件中。 函数原型 template <typename Container> bac…
阅读更多...
使用 FFmpeg 进行音视频转换的相关命令行参数解释

使用 FFmpeg 进行音视频转换的相关命令行参数解释

FFmpeg 是一个强大的多媒体框架&#xff0c;能够解码、编码、转码、录制、播放以及流化几乎所有类型的音频和视频。它广泛应用于音视频处理任务中&#xff0c;包括格式转换、剪辑、合并、水印添加等。本文中简鹿办公将介绍如何使用 FFmpeg 进行一些常见的音视频转换任务。 安装…
阅读更多...
力扣：94--中序遍历二叉树

力扣：94--中序遍历二叉树

树 – 二叉树 完全二叉树&#xff1a; 完全二叉树可以用数组完美匹配位置&#xff08;先序存储&#xff1a;根左右&#xff09;&#xff0c; 推论一 &#xff1a; 位置为k的节点&#xff0c;左孩子&#xff1a;2*k 1 &#xff0c;右孩子 &#xff1a; 2 * &#xff08;k 1&…
阅读更多...
CSS——选择器、PxCook软件、盒子模型

CSS——选择器、PxCook软件、盒子模型

选择器 结构伪类选择器 作用&#xff1a;根据元素的结构关系查找元素。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&quo…
阅读更多...
SpringMVC学习记录（三）之响应数据

SpringMVC学习记录（三）之响应数据

SpringMVC学习记录&#xff08;三&#xff09;之响应数据 一、页面跳转控制1、快速返回模板视图2、转发和重定向 二、返回JSON数据1、前置准备2、ResponseBody 三、返回静态资源1、静态资源概念2、访问静态资源 /*** TODO: 一个controller的方法是控制层的一个处理器,我们称为h…
阅读更多...
推荐一款ETCD桌面客户端——Etcd Workbench

推荐一款ETCD桌面客户端——Etcd Workbench

Etcd Workbench 我相信很多人在开始管理ETCD的时候都去搜了Etcd客户端工具&#xff0c;然后找到了官方的Etcd Manager&#xff0c;但用完之后发现它并不好用&#xff0c;还不支持多连接和代码格式化&#xff0c;并且已经好几年不更新了&#xff0c;于是市面上就有了好多其他客…
阅读更多...
FET113i-S核心板已支持RISC-V，打造国产化降本的更优解 -飞凌嵌入式

FET113i-S核心板已支持RISC-V，打造国产化降本的更优解 -飞凌嵌入式

FET113i-S核心板是飞凌嵌入式基于全志T113-i处理器设计的国产工业级核心板&#xff0c;凭借卓越的稳定性和超高性价比&#xff0c;FET113i-S核心板得到了客户朋友们的广泛关注。作为一款拥有A7核RISC-V核DSP核的多核异构架构芯片&#xff0c;全志科技于近期释放了T113-i的RISC-…
阅读更多...
实践出真知：MVEL表达式中for循环的坑

实践出真知：MVEL表达式中for循环的坑

目录标题 背景MVEL脚本(有问题的)MVEL脚本(正确的)结论分析 背景 需要从一个URL的拼接参数中解析出id的值并输出 比如&#xff1a; 存在URLhttps://xxxxxxxxxx?id999999&type123&name345 然后需要输出id999999 MVEL脚本(有问题的) 入参&#xff1a;parseThisUrlhttp…
阅读更多...
【数据集】【YOLO】【目标检测】道路裂缝数据集 5466 张，YOLO/VOC格式标注！

【数据集】【YOLO】【目标检测】道路裂缝数据集 5466 张，YOLO/VOC格式标注！

数据集介绍 【数据集】道路裂缝数据集 5466 张&#xff0c;目标检测&#xff0c;包含YOLO/VOC格式标注。数据集中包含一种分类&#xff0c;检测范围城市道路裂缝、高速道路裂缝、乡村道路裂缝。 戳我头像获取数据&#xff0c;或者主页私聊博主哈~ 一、数据概述 道路裂缝检测…
阅读更多...
SCRM开发新趋势打造高效客户关系管理系统

SCRM开发新趋势打造高效客户关系管理系统

内容概要 在当今数字化的浪潮中&#xff0c;客户关系管理&#xff08;SCRM&#xff09;系统的开发正迎来了突破性的新趋势。传统的客户管理方式已经无法满足现代企业对灵活性与高效性的需求&#xff0c;我们必须顺应时代的发展&#xff0c;采用更为智能化的解决方案。SCRM开发…
阅读更多...
WordPress在windows下安装

WordPress在windows下安装

目录 一、WordPress下载官网 二、配置 WordPress 三、安装WordPress 1、打开测试域名安装 2、创建数据库 3、配置数据库账号密码 4、设置后台账号密码 5、安装成功后点登录即可 一、WordPress下载官网 点击下面下载链接&#xff0c;下载安装包&#xff0c;并且php和mys…
阅读更多...
Pytorch（二）

Pytorch（二）

五、torchvision 5.1 torchvision中的Datasets 5.1.1 下载数据集 torchvision 文档列出了很多科研或者毕设常用的一些数据集&#xff0c;如入门数据集MNIST&#xff0c;用于手写文字。这些数据集位于torchvision.datasets模块&#xff0c;可以通过该模块对数据集进行下载&am…
阅读更多...
二分查找算法—C++

二分查找算法—C++

一&#xff0c;二分查找 1&#xff0c;题目描述 在一个给定的有序数组中&#xff0c;查找目标值target&#xff0c;返回它的下标。如果不存在&#xff0c;返回-1 2&#xff0c;思路 解法一&#xff1a;暴力枚举&#xff0c;遍历整个数组&#xff0c;直到找到目标值&#xff…
阅读更多...
PyQt5实战——UTF-8编码器UI页面设计以及按钮连接（五）

PyQt5实战——UTF-8编码器UI页面设计以及按钮连接（五）

个人博客&#xff1a;苏三有春的博客 系类往期文章&#xff1a; PyQt5实战——多脚本集合包&#xff0c;前言与环境配置&#xff08;一&#xff09; PyQt5实战——多脚本集合包&#xff0c;UI以及工程布局&#xff08;二&#xff09; PyQt5实战——多脚本集合包&#xff0c;程序…
阅读更多...
Call For Speaker! ｜2025中国国际音频产业大会（GAS）演讲嘉宾征集令启动！

Call For Speaker! ｜2025中国国际音频产业大会（GAS）演讲嘉宾征集令启动！

2025中国国际音频产业大会&#xff08;GAS&#xff09;已定档2025年3月26-27日。 GAS 2025演讲嘉宾征集正式启动&#xff01;我们将再次汇聚音频领域的专家和行业领袖&#xff0c;力求为与会者呈现一场内容丰富、精彩纷呈的知识盛宴。 SPRGASING FESTIVAL 如果 您在音频领域…
阅读更多...
安装docker-compose

安装docker-compose

安装包地址https://github.com/docker/compose/releases wget https://github.com/docker/compose/releases/download/v2.30.3/docker-compose-Linux-x86_64 mv docker-compose-Linux-x86_64 /usr/local/bin/docker-compose chmod x /usr/local/bin/docker-compose docker-com…
阅读更多...
【355】基于springboot的助农管理系统

【355】基于springboot的助农管理系统

助农管理系统的设计与实现 摘要 近年来&#xff0c;信息化管理行业的不断兴起&#xff0c;使得人们的日常生活越来越离不开计算机和互联网技术。首先&#xff0c;根据收集到的用户需求分析&#xff0c;对设计系统有一个初步的认识与了解&#xff0c;确定助农管理系统的总体功…
阅读更多...
计算机网络——TCP篇

计算机网络——TCP篇

TCP篇 基本认知 TCP和UDP的区别? TCP 和 UDP 可以使用同一个端口吗&#xff1f; 可以的 传输层中 TCP 和 UDP在内核中是两个完全独立的软件模块。可以根据协议字段来选择不同的模块来处理。 TCP 连接建立 TCP 三次握手过程是怎样的&#xff1f; 一次握手:客户端发送带有 …
阅读更多...
PyQt5实战——UTF-8编码器功能的实现（六）

PyQt5实战——UTF-8编码器功能的实现（六）

个人博客&#xff1a;苏三有春的博客 系类往期文章&#xff1a; PyQt5实战——多脚本集合包&#xff0c;前言与环境配置&#xff08;一&#xff09; PyQt5实战——多脚本集合包&#xff0c;UI以及工程布局&#xff08;二&#xff09; PyQt5实战——多脚本集合包&#xff0c;程序…
阅读更多...
闯关leetcode——3222. Find the Winning Player in Coin Game

闯关leetcode——3222. Find the Winning Player in Coin Game

大纲 题目地址内容 解题代码地址 题目 地址 https://leetcode.com/problems/find-the-winning-player-in-coin-game/description/ 内容 You are given two positive integers x and y, denoting the number of coins with values 75 and 10 respectively. Alice and Bob a…
阅读更多...
最新文章

Copyright @ 2022~2023