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

react学习笔记-5:react路由

react旧版本路由

旧版本的路由是按照组件的方式来写的

编写router/index.tsx文件

import App from "../App"
import Home from "../views/Home"
import About from "../views/About"
import { BrowserRouter,Routes,Route } from "react-router-dom"
//两种路由模式的组件,BrowserRouter(history模式), HashRouter (Hash模式)// const baseRouter = () => {
// 如果有逻辑,才需要写return,如果没有逻辑直接reture,可以使用下面的简写
//    return()
//}const baseRouter = () => (<BrowserRouter><Routes><Route path="/" element={<App />}><Route path="/home" element={<Home />}></Route><Route path="/about" element={<About />}></Route></Route></Routes></BrowserRouter>
)export  default baseRouter

修改main.tsx文件,引入router下的首页组件

import React from 'react'
import ReactDOM from 'react-dom/client'//正确的样式引入顺序
//样式初始化一般放在最前面,引用reset-css
import "reset-css"//UI框架的样式一般放在组件样式之前
//import XXXX//全局样式
import "@/assets/styles/global.scss"//组件的样式
//import App from './App'
import Router from "./router"ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<React.StrictMode><Router /></React.StrictMode>,
)

 修改App.tsx

import { useState } from 'react'
import Comp1 from "@/components/Comp1/index"
import Comp2 from "@/components/Comp2/index"
import { Button, Space } from 'antd';
import {PlayCircleOutlined} from '@ant-design/icons';
import {Outlet} from "react-router-dom"function App() {const [count, setCount] = useState(0)return (<div className="App">我的React项目 <Comp1></Comp1><Comp2></Comp2><Button>我们的按钮</Button><Button type="primary">Primary Button</Button><PlayCircleOutlined spin="true" style={{fontSize:'40px'}}/>{/* 占位符组件,类似窗口,用来展示组件的,有点像vue中的router-view*/}<Outlet></Outlet></div>)
}

路由链接

引入Link组件,并修改App.tsx文件

import { useState } from 'react'
import Comp1 from "@/components/Comp1/index"
import Comp2 from "@/components/Comp2/index"
import { Button, Space } from 'antd';
import {PlayCircleOutlined} from '@ant-design/icons';
import {Outlet, Link} from "react-router-dom"function App() {const [count, setCount] = useState(0)return (<div className="App">我的React项目 <Link to="/home">Home</Link><Link to="/about">About</Link><Link to="/">首页</Link><Comp1></Comp1><Comp2></Comp2><Button>我们的按钮</Button><Button type="primary">Primary Button</Button><PlayCircleOutlined spin="true" style={{fontSize:'40px'}}/>{/* 占位符组件,类似窗口,用来展示组件的,有点像vue中的router-view*/}<Outlet></Outlet></div>)
}

路由重定向

修改router/index.tsx文件,引入Navigate组件,并配置重定向

import App from "../App"
import Home from "../views/Home"
import About from "../views/About"
import { BrowserRouter,Routes,Route,Navigate } from "react-router-dom"
//两种路由模式的组件,BrowserRouter(history模式), HashRouter (Hash模式)// const baseRouter = () => {
// 如果有逻辑,才需要写return,如果没有逻辑直接reture,可以使用下面的简写
//    return()
//}const baseRouter = () => (<BrowserRouter><Routes><Route path="/" element={<App />}>{/*配置用户访问/的时候,重定向到/home路径 */}<Route path="/" element={<Navigate to='/home' />}></Route><Route path="/home" element={<Home />}></Route><Route path="/about" element={<About />}></Route></Route></Routes></BrowserRouter>
)

react新版本路由

新版本采用对象形式的写法

修改router/index.tsx

import Home from "../views/Home"
import About from "../views/About"
import { Navigate } from "react-router-dom"const routes = [{path:"/",element:<Navigate to='/home' />},{path:"/home",element:<Home />},{path:"/about",element:<About />}
]export  default routes

修改main.tsx,引入BrowserRouter组件,用回App顶级组件

import React from 'react'
import ReactDOM from 'react-dom/client'
import "reset-css"
import "@/assets/styles/global.scss"import { BrowserRouter } from "react-router-dom"
import App from './App'ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>
)

修改App.tsx,换成hook形式的对象,引入useRoutes库,实例化一个useRoutes对象outlet,最终展示该对象outlet

import { useState } from 'react'
import {useRoutes, Link} from "react-router-dom"
import router from "./router"function App() {const [count, setCount] = useState(0)const outlet =useRoutes(router)return (<div className="App">我的React项目 <Link to="/home">Home</Link><Link to="/about">About</Link><Link to="/">首页</Link>{/* 占位符组件,类似窗口,用来展示组件的,有点像vue中的router-view*/}{outlet}</div>)
}export default App

路由的懒加载

修改router/index.tsx,引入react库中的lazy,定义一个About对象,实例化lazy函数

import { lazy } from "react"
import Home from "../views/Home"
//import About from "../views/About"
import { Navigate } from "react-router-dom"const About = lazy(()=>import ("../views/About"))//懒加载的模式的组件写法,外面需要套一层loading的提示加载组件const routes = [{path:"/",element:<Navigate to='/home' />},{path:"/home",element:<Home />},{path:"/about",element:<React.Suspense fallback={<div>Loading...</div>}><About /></React.Suspense>}
]export  default routes

自定义Loading方法

定义一个Loading函数封装loading组件,引入React库,定义withLoadingComponent组件,设置组件变量为一个JSX.Element对象。

import React,{ lazy } from "react"
import Home from "../views/Home"
//import About from "../views/About"
import User from "../views/User"
import { Navigate } from "react-router-dom"const About = lazy(()=>import ("../views/About"))//懒加载的模式的组件写法,外面需要套一层loading的提示加载组件//定义一个Loading函数
const withLoadingComponent = (comp:JSX.Element) =>{return (<React.Suspense fallback={<div>Loading...</div>}>{comp}</React.Suspense>)
}const routes = [{path:"/",element:<Navigate to='/home' />},{path:"/home",element:<Home />},{path:"/about",element:<React.Suspense fallback={<div>Loading...</div>}><About /></React.Suspense>},{path:"/user",
//        element:<User />element:withLoadingComponent(<User />)},
]export  default routes

http://www.lryc.cn/news/32602.html

相关文章:

  • [Python图像处理] 使用高通滤波器实现同态滤波
  • PyTorch深度学习:60分钟入门
  • C语言指针常见问题汇总
  • Coremail邮件系统全新上线存档邮箱功能
  • Python绘图
  • 【独家】华为OD机试 - 第K个最小码值的字母(C 语言解题)
  • 整数反转(python)
  • 【数据结构】二叉树与堆
  • Git图解-常用命令操作-可视化
  • C语言-基础了解-20-typedef
  • Ubuntu系统升级16.04升级18.04
  • CM6.3.2启用Kerberos(附问题解决)
  • QML 动画(组合动画)
  • 【PHP代码注入】PHP代码注入漏洞
  • Python 常用语句同C/C++、Java的不同
  • 一把火烧掉了苹果摆脱中国制造的幻想,印度制造难担重任
  • 常用的 JavaScript 数组 API
  • 海思3531a pjsip交叉编译
  • 《安富莱嵌入式周报》第305期:超级震撼数码管瀑布,使用OpenAI生成单片机游戏代码的可玩性,120通道逻辑分析仪,复古电子设计,各种运动轨迹函数源码实现
  • 力扣-查找每个员工花费的总时间
  • 企业级信息系统开发学习笔记1.8 基于Java配置方式使用Spring MVC
  • 【C语言复习】C语言中的文件操作
  • 00后整顿职场,当摸鱼测试员遇上了内卷00后。
  • 程序员的上帝视角(4)——视角
  • 一、webpack基础
  • 超详细VMware CentOS7(最小安装)安装教程
  • 经典卷积模型回顾8—NIN实现图像分类(matlab)
  • 【Java笔记】泛型
  • 【Linux】用户管理
  • 深入理解Mysql索引底层数据结构与算法