react 11之 router6路由 (两种路由模式、两种路由跳转、两种传参与接收参数、嵌套路由,layout组件、路由懒加载)

目录

  • react路由1:安装和两种模式
  • react路由2:两种路由跳转 ( 命令式与编程式)
    • 2-1 路由跳转-命令式
    • 2-2 路由跳转-编程式 - 函数组件
      • 2-2-1 app.jsx
      • 2-2-2 page / Home.jsx
      • 2-2-3 page / About.jsx
      • 2-2-4 效果
  • react路由3:函数式组件-编程式导航传递参数
    • 3-1 app.jsx
    • 3-2 Home.jsx
    • 3-3 About.jsx
  • react路由4:路由重定向
    • app.jsx
  • react路由5:嵌套路由,layout组件、路由懒加载
    • index.jsx 入口文件
    • app.js 和 app.css
    • router / index.js
    • page / layout.jsx h5的layout组件
    • page / Home.jsx
    • page / About.jsx
    • page / Test.jsx
    • page / form / form.jsx 使用Outlet 渲染子路由
    • page / form / News/jsx
    • 效果

react路由1:安装和两种模式

  • npm i react-router-dom
  • 两种模式
    • Router:所有路由组件的根组件,包裹路由的最外层容器
    • Link:跳转路由组件
    • Routes :用于定义和渲染路由规则( 用于替换 Switch 组件)
    • Route:路由规则匹配组件,显示当前规则对应的组件
      • exact => 精确匹配,只有当 path 和 pathname 完全匹配时才会展示该路由
import React from 'react';
// import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
import { HashRouter as Router, Link, Route, Routes } from 'react-router-dom';const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;const App = () => {return (<Router><nav><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li></ul></nav><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /></Routes></Router>);
};export default App;

react路由2:两种路由跳转 ( 命令式与编程式)

2-1 路由跳转-命令式

import React from 'react';
// import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
import { HashRouter as Router, Link, Route, Routes } from 'react-router-dom';const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;const App = () => {return (<Router><nav><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li></ul></nav><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /></Routes></Router>);
};export default App;

2-2 路由跳转-编程式 - 函数组件

2-2-1 app.jsx

import React, { Component } from 'react';
import { HashRouter as Router, Route, Routes } from 'react-router-dom';
import About from "./page/About";
import Home from "./page/Home";
export default class App extends Component {state = {}render(){return (<Router><Routes><Route path="/" element={ <Home />} /><Route path="/about" element={ <About />} /></Routes></Router>)}
}

2-2-2 page / Home.jsx


import React from 'react';
import { useNavigate } from 'react-router-dom';
const Home = () => {const navigate = useNavigate();const goToAbout = () => {navigate('/about');}return (<div><h1>Home</h1><button onClick={goToAbout}>Go to About</button></div>)
}
export default Home;

2-2-3 page / About.jsx


import React from 'react';
import { useNavigate } from 'react-router-dom';
const About = () => {const navigate = useNavigate();const goToAbout = () => {navigate('/');}return (<div><h1>About</h1><button onClick={goToAbout}>Go to Home</button></div>)
}
export default About;

2-2-4 效果

在这里插入图片描述

react路由3:函数式组件-编程式导航传递参数

3-1 app.jsx

import React, { Component } from 'react';
import { HashRouter as Router, Route, Routes } from 'react-router-dom';
import About from "./page/About";
import Home from "./page/Home";
export default class App extends Component {state = {}render(){return (<Router><Routes><Route path="/" element={<Home/>} />{/* 精确匹配:只有当 path 和 pathname 完全匹配时才会展示该路由 */}<Route exact path="/about" element={ <About/> } /></Routes></Router>)}
}

3-2 Home.jsx


import React from 'react';
import { useNavigate } from 'react-router-dom';
const Home = () => {const navigate = useNavigate();const goToAbout = () => {// 向about页面 01:传递search参数数据,拼接再url中=> /about?name=homeName ; 02:传递state=> 自定义数据navigate('/about?name=homeName&code=001',{ state: {key:'来自home传递'} });}return (<div><p>Home</p><button onClick={goToAbout}>Go to About</button></div>)
}
export default Home;

3-3 About.jsx


import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
const About = () => {const navigate = useNavigate();const location = useLocation();// 当前about页面 接受 home页面传递的参数console.log('location',location,"location.state",location.state); // location.state {key: '来自home传递'}const searchParams = new URLSearchParams(location.search);const param1 = searchParams.get('name');const param2 = searchParams.get('code');console.log('param1',param1,'param2',param2); // param1 homeName param2 001const goToAbout = () => {navigate('/');}return (<div><p>About - key {location.state.key} </p><button onClick={goToAbout}>Go to Home</button></div>)
}
export default About;

react路由4:路由重定向

  • 使用 Navigate 组件实现重定向 , 匹配到 path="*" 需要放置再最后一个

app.jsx

  • <Route path="*" element={<Navigate to="/" />} />
import React, { Component } from 'react';
import { HashRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
import About from "./page/About";
import Home from "./page/Home";
import Test from "./page/Test";
export default class App extends Component {state = {}render(){return (<Router><Routes><Route path="/" element={<Home/>} />{/* 精确匹配:只有当 path 和 pathname 完全匹配时才会展示该路由 */}<Route exact path="/about" element={ <About/> } /><Route exact path="/test" element={ <Test/> } /><Route path="*"  element={<Navigate to="/" />} /></Routes></Router>)}
}

react路由5:嵌套路由,layout组件、路由懒加载

index.jsx 入口文件

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import App from "./App";
import store from "./store/index.js";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}><App /></Provider>
);

app.js 和 app.css

import React, { Suspense } from "react";
import { HashRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
import "./app.css";
import routes from "./router/index";
const renderRoutes = (routes) => {return routes.map((route, index) => {const { path, element, children } = route;return (<Routekey={index}path={path}element={element}><Route index element={<Navigate to="/home" replace />} />{children && renderRoutes(children)}</Route>);});
};export default function App() {return (<div id="app"><Router><Suspense  fallback={<div>Loading...</div>}><Routes>{renderRoutes(routes)}<Route path="*"  element={<Navigate to="/home" />} /></Routes></Suspense></Router></div>);
}* {margin: 0;padding: 0;box-sizing: border-box;
}
html,body,#root,#app{height: 100vh;
}
body {font-family: sans-serif;overflow: hidden;
}

router / index.js

import { lazy } from "react";
import { Navigate } from "react-router-dom";
const Layout = lazy(() => import("../5react路由/page/Layout"))
const Home = lazy(() => import("../5react路由/page/Home"))
const About = lazy(() => import('../5react路由/page/About'))
const Test = lazy(() => import("../5react路由/page/Test"))
const News = lazy(() => import("../5react路由/page/Form/News"))
const Form = lazy(() => import("../5react路由/page/Form/Form"))
const routes = [{path:"/",element: <Layout />,children:[{ // 用于重定向到 home pageindex: true,element: <Navigate to="/home" replace />},{path: 'home',element: <Home/>},{path: 'about',element: <About/>,exact:true ,// 精准匹配},{path: 'test',element: <Test/>,exact:true // 精准匹配}]},{path: 'form',element: <Form/>,// exact:true ,// 精准匹配children: [{index: true,element: <Navigate to="/form/news" replace />},{path: 'news',element: <News/>,}]},
]export default routes

page / layout.jsx h5的layout组件

import React from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import styled from 'styled-components';
const footerList = [{ path:"/home",name:'首页',key:'home' },{ path:"/about",name:'关于',key:'about' },{ path:"/test",name:'测试',key:'test' }
]
const AppWrap = styled.div`background: #eee;height: 100vh;.header {height: 32px;line-height: 32px;background: #ddd;}.main {margin-bottom:32px;background: #eee;height: calc(100% - 64px);}.footer {position: fixed;bottom:0;left:0;width:100%;display: flex;justify-content: center;align-items: center;.footer-item {height: 32px;line-height: 32px;color: #fff;flex: 1;text-align: center;background: #ccc;}}
`;
export default function Layout(props) {const navigate = useNavigate()const goToPage = (item) => {console.log('goToPage', item.path);navigate(item.path)}return (<AppWrap><div className='header'>header</div><div className='main'><Outlet/></div><div className='footer'>{footerList.map(item => {return (<div className='footer-item' key={item.key} onClick={()=>{goToPage(item)}}>{item.name}</div>)})}</div></AppWrap>)
}

page / Home.jsx


import React from 'react';
const Home = () => {return (<div><p>home首页Home</p></div>)
}
export default Home;

page / About.jsx


import React from 'react';
import { useNavigate } from 'react-router-dom';
const About = () => {const navigate = useNavigate();const goToForm = () =>{navigate('/form');}return (<div><p>About</p><button onClick={goToForm}>Go to form</button></div>)
}
export default About;

page / Test.jsx


import React from 'react';
import { useNavigate } from 'react-router-dom';
const Test = () => {const navigate = useNavigate();const goToReset = () =>{navigate('/aaaa');}const goToNews = () =>{navigate('/form/news');}return (<div><p>Test</p><button onClick={goToReset}>Go to 重定向</button><button onClick={goToNews}>Go to News</button></div>)
}
export default Test;

page / form / form.jsx 使用Outlet 渲染子路由


import React from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
const Form = () => {const navigate = useNavigate();const goToHome = () =>{navigate('/home');}return (<div><Outlet /><button onClick={goToHome}>Go to Home</button></div>)
}
export default Form;

page / form / News/jsx


import React from 'react';
import { useNavigate } from 'react-router-dom';
const News = () => {const navigate = useNavigate();const goToReset = () =>{navigate('/bbb');}return (<div><p>News</p><button onClick={goToReset}>Go to 重定向</button></div>)
}
export default News;

效果

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql 8.0 窗口函数 之 分布函数 与 sql server (2017以后支持) 分布函数 一样

mysql 分布函数 percent_rank&#xff08;&#xff09; &#xff1a;等级值 百分比cume_dist() &#xff1a;累积分布值 percent_rank&#xff08;&#xff09; 计算方式 (rank-1)/(rows-1)&#xff0c; 其中 rank 的值为使用RANK()函数产生的序号&#xff0c;rows 的值为当前…

进行Stable Diffusion的ai训练怎么选择显卡?

Stable Diffusion主要用于从文本生成图像&#xff0c;是人工智能技术在内容创作行业中不断发展的应用。要在本地计算机上运行Stable Diffusion&#xff0c;您需要一个强大的 GPU 来满足其繁重的要求。强大的 GPU 可以让您更快地生成图像&#xff0c;而具有大量 VRAM 的更强大的…

奥威BI数据可视化工具:个性化定制,打造独特大屏

每个人都有自己独特的审美&#xff0c;因此即使是做可视化大屏&#xff0c;也有很多人希望做出不一样的报表&#xff0c;用以缓解审美疲劳的同时提高报表浏览效率。因此这也催生出了数据可视化工具的个性化可视化大屏制作需求。 奥威BI数据可视化工具&#xff1a;个性化定制&a…

在Linux系统上安装和配置Redis数据库,无需公网IP即可实现远程连接的详细解析

文章目录 1. Linux(centos8)安装redis数据库2. 配置redis数据库3. 内网穿透3.1 安装cpolar内网穿透3.2 创建隧道映射本地端口 4. 配置固定TCP端口地址4.1 保留一个固定tcp地址4.2 配置固定TCP地址4.3 使用固定的tcp地址连接 Redis作为一款高速缓存的key value键值对的数据库,在…

消息队列——RabbitMQ(一)

MQ的相关概念 什么事mq MQ(message queue)&#xff0c;从字面意思上看&#xff0c;本质是个队列&#xff0c;FIFO 先入先出&#xff0c;只不过队列中存放的内容是 message 而已&#xff0c;还是一种跨进程的通信机制&#xff0c;用于上下游传递消息。在互联网架构中&#xff…

【Python爬虫案例】爬取大麦网任意城市的近期演出!

老规矩&#xff0c;先上结果&#xff1a; 含10个字段&#xff1a; 页码&#xff0c;演出标题&#xff0c;链接地址&#xff0c;演出时间&#xff0c;演出城市&#xff0c;演出地点&#xff0c;售价&#xff0c;演出类别&#xff0c;演出子类别&#xff0c;售票状态。 代码演示…

一款打工人必备的电脑端自律软件!!冲鸭打工人!!

你&#xff01;有没有渴望进步&#xff01;&#xff01; 你&#xff01;有没有渴望变强&#xff01;&#xff01;&#xff01; 成为大佬&#xff01;&#xff01;&#xff01;超越巨佬&#xff01;&#xff01;&#xff01; 这就是一款为这样的你量身定做的程序&#xff1a;输入…

vue3 tailwindcss的使用

首先安装依赖&#xff1a; npm install -D tailwindcsslatest postcsslatest autoprefixerlatestnpm i -D unocss 然后vite.config.ts中 引入 import Unocss from unocss/viteexport default defineConfig({plugins: [Unocss(),],})终端执行&#xff1a; npx tailwindcss in…

【HTML】HTML面试知识梳理

目录 DOCTYPE&#xff08;文章类型&#xff09;head标签浏览器乱码的原因及解决常用的meta标签与SEOscript标签中defer和async的区别src&href区别HTML5有哪些更新语义化标签媒体标签表单进度条、度量器DOM查询Web存储Canvas和SVG拖放 &#xff08;HTML5 drag API&#xff0…

跨平台图表:ChartDirector for .NET 7.1 Crack

什么是新的 ChartDirector for .NET 7.0 支持跨平台使用&#xff0c;但仅限于 .NET 6。这是因为在 .NET 7 中&#xff0c;Microsoft 停止了用于非 Windows 使用的 .NET 图形库 System.Drawing.Common。由于 ChartDirector for .NET 7.0 依赖于该库&#xff0c;因此它不再支持 .…

村口的人家排放污水,污水浸染了整个村子,怎么办

从前有一个很不错的村子里&#xff0c;村子里有很多户人家&#xff0c;随着生活水平越来越好&#xff0c;房子也修起来了&#xff0c;柏油马路也宽敞了&#xff0c;大家进出村子&#xff0c;都要走那条马路&#xff0c;要不就出不去。 目录 1. 修厕所 2. 村口的日家 3. 告诉…

如何利用SFTP如何实现更安全的远程文件传输 ——【内网穿透】

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《高效编程技巧》《cpolar》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 1. 安装openSSH1.1 安装SSH1.2 启动ssh 2. 安装cpolar2.1 配置termux服务 3. 远程SFTP连接配置3.1 查看生成的随机公…

CSS 实现页面底部加载中与加载完毕效果

效果图 实现代码 <view class"bottom-load-tip"><view class"line-tip"></view><view class"loading-animation" v-if"!lastPage"></view><view>{{ lastPage ? "没有更多了" : "…

【深度学习 | 感知器 MLP(BP神经网络)】掌握感知的艺术: 感知器和MLP-BP如何革新神经网络

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

学会Mybatis框架:一文掌握MyBatis与GitHub插件分页的完美结合【三.分页】

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Mybatis的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.Mybatis分页 1. Mybatis自带分页 2…

如何使用CSS实现一个拖拽排序效果?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 实现拖拽排序效果的CSS和JavaScript示例⭐ HTML 结构⭐ CSS 样式 (styles.css)⭐ JavaScript 代码 (script.js)⭐ 实现说明⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦…

在自定义数据集上使用 Detectron2 和 PyTorch 进行人脸检测

本文讲讲述如何使用Python在自定义人脸检测数据集上微调预训练的目标检测模型。学习如何为Detectron2和PyTorch准备自定义人脸检测数据集&#xff0c;微调预训练模型以在图像中找到人脸边界。 人脸检测是在图像中找到&#xff08;边界的&#xff09;人脸的任务。这在以下情况下…

基于前端技术原生HTML、JS、CSS 电子病历编辑器源码

电子病历系统采取结构化与自由式录入的新模式&#xff0c;自由书写&#xff0c;轻松录入。实现病人医疗记录&#xff08;包含有首页、病程记录、检查检验结果、医嘱、手术记录、护理记录等等。&#xff09;的保存、管理、传输和重现&#xff0c;取代手写纸张病历。不仅实现了纸…

centos7.9和redhat6.9 离线升级OpenSSH和openssl (2023年的版本)

升级注意事项&#xff01; 1、多开几个连接窗口&#xff08;xshell&#xff09;&#xff0c;避免升级openssh失败无法再次连接终端&#xff0c;否则要跑机房了。 2、可开启telnet服务、vnc服务、打快照。多几个“保命”的路数。一、centos7.9的信息 [rootnode2 ~]# openssl v…

Socket通信与WebSocket协议

文章目录 目录 文章目录 前言 一、Socket通信 1.1 BIO 1.2 NIO 1.3 AIO 二、WebSocket协议 总结 前言 一、Socket通信 Socket是一种用于网络通信的编程接口&#xff08;API&#xff09;&#xff0c;它提供了一种机制&#xff0c;使不同主机之间可以通过网络进行数据传输和通信…