React笔记（六）React路由

news/2024/12/18 14:45:59/

一、React路由简介

React 官方并没有提供对应的路由插件，因此，我们需要下载第三方的路由插件 —— React Router DOM。

React Router 在 2021 年 11 月份的时候更新 v6 的版本。本次课就主要讲解V6版本

二、路由配置

1、下载路由

在项目根目录中，通过以下命令

yarn add react-router-dom

2、路由配置

1）首先在react项目的入口文件index.js文件中，使用<BrowserRouter>将<App>包裹起来

import {BrowserRouter} from 'react-router-dom'
​
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<BrowserRouter><App /></BrowserRouter> 
);

BrowserRouter：包裹这个应用，一个React应用只需使用一次

在 React Router 中提供了两种路由模式：hash 和 history。

对应的的路由组件分别是：

  • HashRouter：hash 模式的路由

  • BrowserRouter：history 模式的路由

实际使用时，任选其中一个模式引入即可

2）其次，在App.js文件中，使用<Routes>设置路由出口，使用<Route>指定导航链接

import React from 'react'
import {Routes,Route} from 'react-router-dom'
import Login from './pages/Login'
import Register from './pages/Register'
import Home from './pages/Home'
export default function App() {return (<Routes><Route path='/login' element={<Login/>}></Route><Route path='/register' element={<Register/>}></Route><Route path='/' element={<Home/>}></Route></Routes>)
}

核心组件作用说明

  • Routes:提供一个路由出口，满足条件的路由组件会渲染到组件内部

  • Route: 用于指定导航链接，完成路由跳转

    • path:path属性指定匹配的路径地址

    • element element属性指定要渲染的组件

三、路由跳转

React Router 中，路由的跳转分为两种方式：

  • 标签（组件）跳转

  • JS（API）跳转

1、通过Link组件跳转

import React from 'react'
import {Link} from 'react-router-dom'
export default function Login() {return (<div><h1>用户登录</h1><Link to="/register">没有账号,去注册</Link></div>)
}

2、编程式路由跳转

实现步骤

  • 导入useNavigate钩子函数

import {useNavigate} from 'react-router-dom'

  • 执行钩子函数得到跳转函数

 let navigate=useNavigate();

  • 执行跳转函数完成跳转

import React from 'react'
import {useNavigate} from 'react-router-dom'
​
export default function Register() {const navigate=useNavigate()const register=(e)=>{e.preventDefault()navigate('/login')}return (<div><h1>用户注册</h1><a href="#" onClick={(e)=>{register(e)}}>已注册，去登录</a></div>)
}

注意

  • 如果在跳转时不想加历史记录，可以添加额外参数replace为true

 const register=(e)=>{e.preventDefault()navigate('/login',{replace:true})}

四、嵌套路由

1、基础配置

实现步骤

  • 定义嵌套路由声明

 <Routes><Route path='/login' element={<Login/>}></Route><Route path='/register' element={<Register/>}></Route><Route path='/' element={<Home/>}><Route path='category' element={<Category/>}></Route><Route path='goods' element={<Goods/>}></Route></Route></Routes>

  • 设置二级路由出口

export default function Home() {return (<><aside><ul><li><NavLink to="/categroy">分类管理</NavLink></li><li><NavLink to="/goods">商品管理</NavLink></li></ul></aside><section>{/* 二级路由出口 */}<Outlet></Outlet></section></>)
}

2、默认二级路由设置

<Routes><Route path='/login' element={<Login/>}></Route><Route path='/register' element={<Register/>}></Route><Route path='/' element={<Home/>}>{/*默认二级路由，添加index属性，删除掉path属性*/}<Route index element={<Main/>}></Route><Route path='category' element={<Category/>}></Route><Route path='goods' element={<Goods/>}></Route></Route>
</Routes>

3、404页配置

应用场景：当所有的路径都没有匹配的时候显示

语法说明：在各级路由的最后添加*号路由作为兜底

<Routes><Route path='/login' element={<Login/>}></Route><Route path='/register' element={<Register/>}></Route><Route path='/' element={<Home/>}>{/*默认二级路由，添加index属性，删除掉path属性*/}<Route index element={<Main/>}></Route><Route path='category' element={<Category/>}></Route><Route path='goods' element={<Goods/>}></Route></Route>{/*当所有路径都没有匹配时渲染此路由*/}<Route path='*' element={<NotFound/>}></Route>
</Routes>

五、路由模式

BrowserRouter模式部署在Nginx服务器上出现404问题的解决办法

1、React打包

  • 在index.js的<BrowserRouter>上添加basename属性，比如

<BrowserRouter basename='/crem'><App></App> </BrowserRouter>

  • 在package.json中添加"homepage": "."

{"homepage": "."
}

  • 在终端上执行打包命令

yarn build

2、Nginx上部署

  • 打包后会产生一个build文件夹，然后将该文件改名为crem,

  • 上传文件的linux服务器的/opt目录下

  • 在/etc/nginx/conf.d/default.conf下添加如下配置

 location /crem {alias /opt/crem;index index.html;}

  • 进入shell中执行如下命令

ps aux|grep nginx  #查看nginx进程
killall -9 nginx   #杀死nginx进程
/usr/sbin/nginx    #启动nginx服务器

3、防止404的配置

  • 修改/etc/nginx/conf.d/default.conf文件，添加如下配置即可

 location /crem {alias /opt/crem;index index.html;try_files $uri /crem/index.html;}

六、路由传参

1、searchParams传参

实现步骤

  • 传参

import {useNavigate} from 'react-router-dom'
export default function CategroyList() {let navigate=useNavigate();return (<div><h2>CategroyList</h2><button onClick={()=>{navigate('/categroyDetail?id=12')}}>详情</button></div>)
}

  • 获取参数

import {useSearchParams} from 'react-router-dom'export default function CategoryDetail() {let [params]=useSearchParams()return (<div><h2>CategroyDetail</h2><div>ID:{params.get('id')}</div></div>)
}

2、params传参

实现步骤

  • 路由设置

 <BrowserRouter><Routes><Route path='/home' element={<Layout/>}><Route path='categroy-detail/:id' element={<CategoryDetail/>}></Route></Route></Routes></BrowserRouter>

  • 传参

import {useNavigate} from 'react-router-dom'
export default function CategroyList() {let navigate=useNavigate();return (<div><h2>CategroyList</h2><button onClick={()=>{navigate('/home/categroy-detail/13')}}>详情</button></div>)
}

  • 获取参数

import React from 'react'
import {useParams} from 'react-router-dom'export default function CategoryDetail() {let params=useParams()return (<div><h2>CategroyDetail</h2><div>ID:{params.id}</div></div>)
}

七、集中式路由渲染

实现步骤

  • 在项目根目录创建router文件夹，并在该目录下创建index.jsx

  • 在router/index.jsx编写路由配置项

import Login from '../pages/Login'
import Register from '../pages/Register'
import Home from '../pages/Home'
import CategoryList from '../pages/Category'
import CategoryDetail from '../pages/Category/Detail'
import GoodsList from '../pages/Goods'
import Main from '../pages/Home/Main'
export default [{path:'/login',element:<Login/>},{path:'/register',element:<Register/>},{path:'/',element:<Home/>,children:[{index:true,element:<Main/>},{path:'/categoryList',element:<CategoryList/>},{path:'/categoryDetail/:id',element:<CategoryDetail/>},{path:'/goodsList',element:<GoodsList/>}]}
]

  • 在App.jsx中通过useRoutes钩子函数来进行集中式配置

import {useRoutes} from 'react-router-dom'
import router from './router/index'
function App() {return useRoutes(router)
}
export default App;

  • 在项目根目录下的index.js中使用<BrowserRouter>包裹<App>

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

八、路由懒加载

1、实现步骤

  • 使用lazy(()=>import('xxx'))方式导入组件

import {lazy} from 'react'
const Login=lazy(()=>import('../pages/Login'))
const Register=lazy(()=>import('../pages/Register'))
const Home=lazy(()=>import('../pages/Home'))
const CategoryList=lazy(()=>import('../pages/Category'))
const CategoryDetail=lazy(()=>import('../pages/Category/Detail'))
const GoodsList=lazy(()=>import('../pages/Goods'))
const Main=lazy(()=>import('../pages/Home/Main'))
export default [{path:'/login',element:<Login/>},{path:'/register',element:<Register/>},{path:'/',element:<Home/>,children:[{index:true,element:<Main/>},{path:'/categoryList',element:<CategoryList/>},{path:'/categoryDetail/:id',element:<CategoryDetail/>},{path:'/goodsList',element:<GoodsList/>}]}
]

  • 通过 React 中提供了 <Suspense> 组件，来实现路由的懒加载。

import {Suspense} from 'react'
function App() {return(<Suspense fallback={<>loading</>}>{useRoutes(router)}</Suspense>)
}

<Suspense> 组件身上，必须设置一个 fallback 属性，属性值可以是一个 HTML 标签，也可以是一个自定义的组件。用于当路由组件还未加载出来前的提示。

2、解决路由闪屏

配置完路由懒加载后出现当进行路由跳转时，出现闪屏现象，要向解决这个问题可以使用 react-loadable插件进行解决

  • 先下载react-loadable依赖包

yarn add react-loadable

  • 建立一个loadable.js，放在src/utils/loadable.js

import Loadable from 'react-loadable';
export default function withLoadable(comp) {return Loadable({//懒加载组件页面loader: comp,loading: () => null,delay: "",})
}

  • 修改router/index.js

import loadable from '../utils/loadable'
const Login=loadable(()=>import('../pages/Login'))
const Register=loadable(()=>import('../pages/Register'))
const Home=loadable(()=>import('../pages/Home'))
const CategoryList=loadable(()=>import('../pages/Category'))
const CategoryDetail=loadable(()=>import('../pages/Category/Detail'))
const GoodsList=loadable(()=>import('../pages/Goods'))
const Main=loadable(()=>import('../pages/Home/Main'))
export default [{path:'/login',element:<Login/>},{path:'/register',element:<Register/>},{path:'/',element:<Home/>,children:[{index:true,element:<Main/>},{path:'/categoryList',element:<CategoryList/>},{path:'/categoryDetail/:id',element:<CategoryDetail/>},{path:'/goodsList',element:<GoodsList/>}]}
]

http://www.ppmy.cn/news/1086059.html

相关文章

pytorch中文文档学习笔记

pytorch中文文档学习笔记

先贴上链接 torch - PyTorch中文文档 首先我们需要安装拥有pytorch的环境 conda指令 虚拟环境的一些指令 查看所有虚拟环境 conda info -e 创建新的虚拟环境 conda create -n env_name python3.6 删除已有环境 conda env remove -n env_name 激活某个虚拟环境 activate env…
阅读更多...
golang遍历map的方法

golang遍历map的方法

在Go语言中&#xff0c;可以使用range关键字来遍历一个map。range关键字会返回两个值&#xff1a;key和value。 以下是遍历map的示例代码&#xff1a; package main import "fmt" func main() { myMap : map[string]int{ "apple": 1, "banana…
阅读更多...
Spring的重试机制-SpringRetry

Spring的重试机制-SpringRetry

在我们的日常开发中&#xff0c;经查会遇到调用接口失败的情况&#xff0c;这时候就需要通过一些方法来进行重试&#xff0c;比如通过while循环手动重复调用或&#xff0c;或者通过记录错误接口url和参数到数据库&#xff0c;然后手动调用接口&#xff0c;或者通过JDK/CGLib动态…
阅读更多...
【C++】Visual Studio EditorConfig 格式设置

【C++】Visual Studio EditorConfig 格式设置

【C】Visual Studio EditorConfig 格式设置 文章目录 【C】Visual Studio EditorConfig 格式设置I - EditorConfig1.1 - 通用设置indent_styleindent_sizetab_widthend_of_linecharsettrim_trailing_whitespaceinsert_final_newline II - Visual Studio 特定键值缩进设置cpp_in…
阅读更多...
武林新秀（一）`git init` 初始化一个新的Git仓库

武林新秀（一）`git init` 初始化一个新的Git仓库

文章目录 命令的概述和用途命令的用法命令行选项和参数的详细说明命令的示例命令的注意事项或提示 命令的概述和用途 git init 是 Git 版本控制系统中用于初始化一个新的 Git 仓库或重新初始化一个现有的仓库的命令。“init” 是 “initialize”&#xff08;初始化&#xff09…
阅读更多...
[华为云云服务器评测] Unbutnu添加SSH Key、编译启动Springboot项目

[华为云云服务器评测] Unbutnu添加SSH Key、编译启动Springboot项目

系列文章目录 第一章 [linux实战] 华为云耀云服务器L实例 Java、node环境配置 第二章 [linux实战] Unbutnu添加SSH Key、启动Springboot项目 文章目录 系列文章目录前言一、任务拆解二、配置git,添加SSH Key2.1、登录远程主机2.2、配置git用户名和邮箱2.3、生成SSH key2.4、查…
阅读更多...
Linux的目录结构特点

Linux的目录结构特点

Linux的目录结构特点 1、使用树形目录结构来组织和管理文件。 2、整个系统只有一个根目录&#xff08;树根&#xff09;&#xff0c;Linux的根目录用“/”表示。 3、其他所有分区以及外部设备&#xff08;如硬盘&#xff0c;光驱等&#xff09;都是以根目录为起点&#xff0…
阅读更多...
Web 应用开发 - 实训一 网页开发

Web 应用开发 - 实训一 网页开发

Web应用开发 实训一 网页开发 一、预习&#xff1a; 1、阅读&#xff1a;教材P1-P39 2、要掌握知识要点&#xff1a;表单标记、超链接标记、CSS的引用方式、CSS选择器、DOM、JavaScript的引入&#xff08;内嵌式、外链式&#xff09;、JavaScript的使用&#xff08;事件处理…
阅读更多...
最新文章

Copyright @ 2022~2023