当前位置: 首页 > news >正文

React:Router路由

ReactRouter引入

在index.js里编辑,创建路由,绑定路由

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from "react-router-dom";
//1、创建router实例对象并配置路由对应关系
const router=createBrowserRouter([{path: '/login',element:<div>我是登录页</div>
},{path: '/article',element: <div>我是文章页</div>}])const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode>{/* { 2、路由绑定} */}<RouterProvider router={router}></RouterProvider></React.StrictMode>
);reportWebVitals();

效果是这样,可以输入路径进入对应页面

ReactRouter抽象路由模块


按照普通开发的流程使用Router,创建page文件夹,在文件夹内部创建Login和Article文件夹,在两个文件夹内部各自创建index.js文件

在 React 项目中,通常已经配置好了 Babel 和 Webpack,因此开发者可以直接在 JS 文件中使用 JSX,而无需额外配置。

然后配置路径和组件的对应关系,创建路由文件夹,在里面创建index.js文件

import Login from "../page/Login";
import Article from "../page/Article";
import { BrowserRouter, createBrowserRouter } from "react-router-dom";
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 './index.css';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from "react-router-dom";
//1、引入router
import router from './router';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode>{/* 2、将router传入RouterProvider */}<RouterProvider router={router}></RouterProvider></React.StrictMode>
);reportWebVitals();

这个page在view里通常叫views

路由导航

比如登录页面,在登录以后就会拿着登录的用户信息传递给下一个路由,打开新页面

有两种方式实现路由导航,一种叫声明式导航,一种叫编程式导航

这是声明式

在Login路由里调用Link组件

import {Link} from 'react-router-dom'
const Login = () => {return <div>我是登录页<Link to='/article'>点我跳转至文章页</Link></div>
}
export default Login

Link被识别为a链接

这是编程式

点击a链接即可跳转到Article页面

绑定点击事件,调用方法进行路由跳转

import { useNavigate } from "react-router-dom"
const Article = () => {const navigate=useNavigate()return <div>我是文章页<button onClick={()=>{navigate('/login')}}>跳转至登陆界面</button></div>
}
export default Article

在路由里传参

两种写法

searchParams传参

把参数以url字符串的格式传入

协议://域名/路径?查询参数#哈希
import { useNavigate } from "react-router-dom"
const Article = () => {const navigate=useNavigate()return <div>我是文章页<button onClick={()=>{navigate('/login')}}>跳转至登陆界面</button><button onClick={()=>{navigate('/login?id=101&name=jack')}}>searchParams传参</button></div>
}
export default Article

获取传递过来的参数params.get()

import { Link } from 'react-router-dom'
import { useSearchParams } from 'react-router-dom'
const Login = () => {const [params] = useSearchParams()const id = params.get('id')const name = params.get('name')return <div>我是登录页<Link to='/article'>点我跳转至文章页id:{id},name:{name}</Link></div>
}
export default Login

params传参

在路由配置的path里加上【:id】加上动态参数才知道你获取的是什么

动态参数(即占位符)

import Login from "../page/Login";
import Article from "../page/Article";
import { BrowserRouter, createBrowserRouter } from "react-router-dom";
const router=createBrowserRouter([{ path: '/login/:id',//动态路由,通过useParams获取element: <Login/>}, {path: '/article',element: <Article/>}
])
export default router

然后在Article路由处直接传递参数101,

import { useNavigate, useParams } from "react-router-dom"
const Article = () => {const navigate = useNavigate()return <div>我是文章页<button onClick={()=>{navigate('/login')}}>跳转至登陆界面</button><button onClick={()=>{navigate('/login?id=101&name=jack')}}>searchParams传参</button><button onClick={()=>{navigate('/login/101')}}>Params传参</button></div>
}
export default Article

在Login页面显示:

import { Link } from 'react-router-dom'
import { useSearchParams } from 'react-router-dom'
import {useParams } from 'react-router-dom'
const Login = () => {const params = useParams()const id = params.idreturn <div>我是登录页<Link to='/article'>点我跳转至文章页id:{id}</Link><div>{id}</div></div>
}
export default Login

如果传递多个数据,可以在url后面接着写:

//Article
import { useNavigate, useParams } from "react-router-dom"
const Article = () => {const navigate = useNavigate()return <div>我是文章页<button onClick={()=>{navigate('/login')}}>跳转至登陆界面</button><button onClick={()=>{navigate('/login?id=101&name=jack')}}>searchParams传参</button><button onClick={()=>{navigate('/login/101/jack')}}>Params传参</button></div>
}
export default Article
//Login
import { Link } from 'react-router-dom'
import { useSearchParams } from 'react-router-dom'
import {useParams } from 'react-router-dom'
const Login = () => {const params = useParams()const id = params.idconst name = params.namereturn <div>我是登录页<Link to='/article'>点我跳转至文章页</Link><div>id:{id}name:{name}</div></div>
}
export default Login
//Router
import Login from "../page/Login";
import Article from "../page/Article";
import { BrowserRouter, createBrowserRouter } from "react-router-dom";
const router=createBrowserRouter([{ path: '/login/:id/:name',//动态路由,通过useParams获取element: <Login/>}, {path: '/article',element: <Article/>}
])
export default router

嵌套路由配置

在嵌套路由中,父级路由就像一个文件夹,子级路由就像文件夹里的文件。要在父级路由中正确显示子级路由的内容,就需要使用<Outlet/>作为二级路由的出口。

在page下创建一个新文件夹充当一级路由:

//layout/index.js
import { Link ,Outlet} from 'react-router-dom'
const Layout = ({}) => { return (<div>我是一级路由layout组件<Link to='/about'>点我跳转至About页</Link>   <Link to='/board'>点我跳转至Board页</Link>   {/* {配置子路由,也就是二级路由的出口} */}<Outlet/></div>)
}
export default Layout

然后再创建两个同级的路由:

//Board
const Board=()  => { return (<div>我是面板</div>)
} 
export default Board
//About
const About=()  => { return (<div>我是一级路由About组件</div>)
} 
export default About

然后配置路由和路径:

import Login from "../page/Login";
import Article from "../page/Article";
import { BrowserRouter, createBrowserRouter } from "react-router-dom";
import Layout  from "../page/Layout";
import About from "../page/About";
import Board from "../page/Board";
const router = createBrowserRouter([{path: '/',element: <Layout />,children: [{path: 'board',element: <Board/>},{path: 'about',element:<About/>}], }
])
export default router

默认二级路由

默认二级路由就是设置你默认打开展示的路由,设置路由去掉path,设置index为true

import Login from "../page/Login";
import Article from "../page/Article";
import { BrowserRouter, createBrowserRouter } from "react-router-dom";
import Layout  from "../page/Layout";
import About from "../page/About";
import Board from "../page/Board";
const router = createBrowserRouter([{path: '/',element: <Layout />,children: [//设置默认路由{index:true,element: <Board/>},{path:'about',element:<About/>}], }
])
export default router

对layout设置

import { Link ,Outlet} from 'react-router-dom'
const Layout = ({}) => { return (<div>我是一级路由layout组件<Link to='/about'>点我跳转至About页</Link>   <Link to='/'>点我跳转至Board页</Link>   {/* {配置子路由,也就是二级路由的出口} */}<Outlet/></div>)
}
export default Layout

打开localhost:3000,展示的是二级路由Board

404路由配置

优化用户体验,当浏览器输入的url在整个路由配置中都找不到path,为了用户体验,可以使用404兜底组件进行渲染

编写NotFound路由,创建NotFound文件夹,在里面的index.js编写👇

const NotFound = () => {return <div>页面被老鼠吃掉了</div>
}
export default NotFound 

在路由路径配置处输入【*】,意思是除了已有的路由,之外的任何值都会跳转到404NotFound页面

import Login from "../page/Login";
import Article from "../page/Article";
import { BrowserRouter, createBrowserRouter } from "react-router-dom";
import Layout  from "../page/Layout";
import About from "../page/About";
import Board from "../page/Board";
import NotFound from "../page/NotFound";
const router = createBrowserRouter([{path: '*',element:<NotFound/>}])
export default router

两种路由模式

相关文章:

React:Router路由

ReactRouter引入 在index.js里编辑&#xff0c;创建路由&#xff0c;绑定路由 import React from react; import ReactDOM from react-dom/client; import ./index.css; import reportWebVitals from ./reportWebVitals; import { createBrowserRouter, RouterProvider } from…...

解决docker认证问题 failed to authorize: failed to fetch oauth token

报错信息[bash1]解决方案 全局代理打开“buildkit”: false &#xff0c;见[图1] [bash1] >docker build -t ffpg . [] Building 71.8s (3/3) FINISHED docker:desktop-linux> [internal] load bui…...

解决Vscode项目同时运行两个项目终端无法自动叠加的问题

终端&#xff08;如命令行工具或服务进程&#xff09;无法自动“叠加”使用同一资源&#xff08;如端口号、进程ID等&#xff09;的核心原因在于操作系统的资源管理机制和网络协议规范的限制。以下是具体分析&#xff1a; 以下是解决 VSCode 同时运行两个项目时终端被前一个占…...

mybatis映射文件相关的知识点总结

mybatis映射文件相关的知识点总结 mybatis官网地址 英文版&#xff1a;https://mybatis.org/mybatis-3/index.html 中文版&#xff1a;https://mybatis.p2hp.com/ 搭建环境 /* SQLyog Ultimate v10.00 Beta1 MySQL - 8.0.30 : Database - mybatis-label *****************…...

verilog 基本语法结构与定义

1、词法约定 verilog中的基本词法约定与C类似。verilog描述包含一个 单词流 &#xff0c;这里 单词 可以是 注释、分隔符、数字、字符串、标识符、关键字。 verilog大小写相关&#xff0c;其中关键字全部小写。 1.1、 空白符 空白符有空格&#xff08;\b&#xff09;制表…...

最节省成本的架构方案:无服务器架构

无服务器架构&#xff08;Serverless Architecture&#xff09;是一种颠覆性的云计算执行模型&#xff0c;它允许开发者专注于编写和部署代码&#xff0c;而无需担心底层服务器基础设施的管理。这种架构以其按需付费、自动伸缩和简化部署等优势&#xff0c;在成本优化方面表现出…...

docker利用docker-compose-gpu.yml启动RAGFLOW,文档解析出错【亲测已解决】

0.问题说明 想要让RAGFLOW利用GPU资源跑起来&#xff0c;可以选择docker-compose-gpu.yml启动。&#xff08;但是官网启动案例是86平台的不是NVIDIA GPU的&#xff0c;docker-compose-gpu.yml又是第三方维护&#xff0c;所以稍有问题&#xff09; 1.问题 docker利用docker-c…...

字节跳动系统攻防算法岗-Flow安全内推

熟悉Android/iOS/鸿蒙/Windows/Linux中的任意一种及多种安全架构&#xff0c;并有漏洞产出&#xff1b; 熟练掌握硬件及BSP安全技术&#xff0c;包括主流SoC安全特性、可信链、TEE等相关技术原理&#xff1b; 熟悉行业主流的安全标准、安全模型、安全解决方案、安全体系&…...

一些有用的电子书

一、Python 1.1、流畅的Python 链接&#xff1a;https://www.aliyundrive.com/s/S4sr1RNXehW 1.2、Python自动化运维与技术实战 链接&#xff1a;https://www.aliyundrive.com/s/dAQQhbyWp3c 1.3、疯狂Python讲义 链接&#xff1a;https://www.aliyundrive.com/s/NnUqjzGB1az …...

TMS320F28P550SJ9学习笔记1:CCS导入工程以及测试连接单片机仿真器

学习记录如何用 CCS导入工程以及测试连接单片机仿真器 以下为我的CCS 以及驱动库C2000ware 的版本 CCS版本&#xff1a; Code Composer Studio 12.8.1 C2000ware &#xff1a;C2000Ware_5_04_00_00 目录 CCS导入工程&#xff1a; 创建工程&#xff1a; 添加工程&#xff1a; C…...

Android中使用Robolectric测试点击事件(不需要手机)

文章目录 一、前言二、简单示例三、注意事项四、另一种写法五、拓展六、参考文档 一、前言 Robolectric 是一个由 Google 维护的开源 Android 测试框架&#xff0c;它允许你以 Android 运行时环境运行单元测试。 Robolectric 提供了一个模拟 Android 运行时环境&#xff0c;允…...

安卓开发相机功能

相机功能 安卓中的相机调用功能也经历了很多的方案升级&#xff0c;目前可选的官方方案是CameraX、Camera2、Camera&#xff08;废弃&#xff09;&#xff0c;还有一些第三方免费或者是付费的相机库。对于大多数开发者&#xff0c;建议使用 CameraX。 CameraX CameraX 是 An…...

机器学习:监督学习、无监督学习和强化学习

机器学习&#xff08;Machine Learning, ML&#xff09;是人工智能&#xff08;AI&#xff09;的一个分支&#xff0c;它使计算机能够从数据中学习&#xff0c;并在没有明确编程的情况下执行任务。机器学习的核心思想是使用算法分析数据&#xff0c;识别模式&#xff0c;并做出…...

基于vue3和flask开发的前后端管理系统(一):项目启动准备

准备工作 我们需要准备以下工具 vue3&#xff1a;构建前端 tailwind css&#xff1a;样式库vite&#xff1a;快速构建vue项目pinia &#xff1a;vue3 的事件管理器 flask&#xff1a;后端代码Mysql&#xff1a;数据库 heidisql&#xff1a;数据库图形化界面 vscode&#xff1…...

一、MySQL备份恢复

一、MySQL备份恢复 1.1 MySQL日志管理 数据库中数据丢失或被破坏可能原因 误删除数据库 数据库工作时&#xff0c;意外断电或程序意外终止 由于病毒造成的数据库损坏或丢失 文件系统损坏后&#xff0c;系统进行自检操作 升级数据库时&#xff0c;命令语句不严格 设备故…...

DeepSeek崛起:如何在云端快速部署你的专属AI助手

在2025年春节的科技盛宴上&#xff0c;DeepSeek因其在AI领域的卓越表现成为焦点&#xff0c;其开源的推理模型DeepSeek-R1擅长处理多种复杂任务&#xff0c;支持多语言处理&#xff0c;并通过搜索引擎获取实时信息。DeepSeek因其先进的自然语言处理技术、广泛的知识库和高性价比…...

SQLite Alter 命令详解

SQLite Alter 命令详解 SQLite 是一种轻量级的数据库&#xff0c;广泛用于各种嵌入式系统、移动应用和小型项目。SQLite 的ALTER TABLE命令用于修改已存在的表结构&#xff0c;包括添加、删除或修改列&#xff0c;以及重命名表等操作。本文将详细解析SQLite的ALTER TABLE命令&…...

2025 聚合易支付完整版PHP网站源码

源码介绍 2025 聚合易支付完整版PHP网站源码 PHP版本&#xff1a;PHP74 源码上传服务器&#xff0c;解压访问域名即可安装 安装完成后一定要设置伪静态 源码里面nginx.txt 就是伪静态 然后复制粘贴到伪静态里面保存即可 部分截图 源码获取 2025 聚合易支付完整版PHP网站源码…...

Android开发Android调web的方法

Android开发Android调web的方法 一般都是web调Android&#xff0c;很少Android调web方法。 我用的是AgentWeb。它内核也是webview。 直接上代码&#xff1a; mAgentWeb.getJsAccessEntrace().quickCallJs("adLookSuccessAndroid",event.getType());它的意思是&am…...

FastGPT 源码:基于 LLM 实现 Rerank (含Prompt)

文章目录 基于 LLM 实现 Rerank函数定义预期输出实现说明使用建议完整 Prompt 基于 LLM 实现 Rerank 下边通过设计 Prompt 让 LLM 实现重排序的功能。 函数定义 class LLMReranker:def __init__(self, llm_client):self.llm llm_clientdef rerank(self, query: str, docume…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...