笔记十九*、选中高亮和嵌套路由使用

19.1 选中高亮 NavLink

App.jsx

import React from "react";
import {NavLink, useRoutes} from "react-router-dom";
import routes from "./routes/index.jsx";
import "./app.css"

const App = () => {
    const element = useRoutes(routes);
    // 选中高亮
    const activeStyle = ({isActive}) => {
        return isActive ? 'background' : "";
    };
    return (
        <div className="all">
            <div>
                <div className="link">
                    <NavLink to="/home" className={activeStyle}>打开首页的页面</NavLink>
                </div>
                <div className="link">
                    <NavLink to="/about" className={activeStyle}>打开关于的页面</NavLink>
                </div>
            </div>
            <div className="view">
                {element}
            </div>
        </div>
    );
}

export default App;

19.2 嵌套路由

home(首页的页面)中嵌套两个字路由,并对字路由设置选中高亮

Home/index.jsx -> 类组件

import React from "react";
import {NavLink, Outlet} from "react-router-dom";

class App extends React.Component {

    // 类组件中不能用const定义变量
    // 选中高亮
    activeStyle = ({isActive}) => {
        return isActive ? 'background' : "";
    };

    render() {
        return (
            <div>
                首页的页面
                <div style={{display: "flex", justifyContent: 'center', marginTop: '20px'}}>
                    <NavLink to='classify' className={this.activeStyle}>classify</NavLink>
                    <NavLink to='navigation' className={this.activeStyle}>navigation</NavLink>
                </div>
                <div style={{background: 'red'}}>
                    {/*<!-- Renders the child route's element, if there is one. -->*/}
                    <Outlet/>
                </div>
            </div>);
    }
}

export default App;

路由表 routes

import {Navigate} from "react-router-dom";
import Home from "../components/Home";
import About from "../components/About";
import Classify from "../components/Home/components/Classify.jsx";
import Navigation from "../components/Home/components/Navigation.jsx";

export default [
    {
        path: '/home',
        element: <Home/>,
        children: [
            {
                path: 'classify',
                element:<Classify />
            },
            {
                path: 'navigation',
                element:<Navigation />
            },
        ]
    },
    {
        path: '/about',
        element: <About/>,
    },
    {
        path: '/',
        element: <Navigate to='about'/>,
    }
]

下面附一张文件结构图

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

「Verilog学习笔记」整数倍数据位宽转换8to16

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 根据时序图&#xff0c;数据是在第二个数据到来之后输出&#xff0c;当仅有一个数据到来时&#xff0c;不产生输出&#xff0c;所以内部需要一个指示信号valid_cnt&#xf…

31.0/LinkedList/Set/ashSet/ TreeSet/Map/ HashMap/ TreeMap

目录 31.1Linkedlist 31.2Set集合 31.3HashSet集合 31.4添加元素 31.5删除 31.6hashSet的遍历 31.7hashSet的源码 31.8TreeSet集合。 31.1Linkedlist 1.凡是查询源码 &#xff0c;我们都是从类的构造方法入手:/*** Constructs an empty list.*/public LinkedList() {}该…

打破限制!MySQL 5.7至8.0跨版本迁移,1分钟搞定多版本数据迁移

在上个月&#xff0c;MySQL 5.7 正式结束了生命周期&#xff0c;即EOL&#xff08;End of Life&#xff09;&#xff0c;意味着Oracle将不再为 MySQL 5.7 提供技术支持&#xff0c;包括Bug修复或安全漏洞&#xff0c;大大增加了使用数据库的风险。在全球关系型数据库市场中&…

企企通相继出席首届百家新锐企业融通创新交流会与采购数字化创新沙龙,持续深化数字赋能

近期&#xff0c;企企通受邀分别参加了广州、上海业界重磅活动&#xff0c;针对新形势下企业数字化采购升级的新技术与新思路、产业链上下游协同发展等进行探讨&#xff0c;赋能数字化信息技术产业生态发展&#xff0c;并对各方主体如何协作共赢助推企业数字化发展建言献策。 0…

五周年活动周历!AutoGen解析·技术畅聊·3大城市工坊本周启动!

飞桨星河社区在成立的5年以来&#xff0c;已汇集660万AI开发者&#xff0c;覆盖深度学习初学者、在职开发者、企业开发者、高校教师、创业者等&#xff0c;已成为AI领域最具影响力的社区之一&#xff0c;无论是AI爱好者还是AI开发者&#xff0c;都能在这里探索AI的无限可能。 …

工博会新闻稿汇总

23届工博会媒体报道汇总 点击文章标题即可进入详情页 9月23日&#xff0c;第23届工博会圆满落幕&#xff01;本届工博会规模之大、能级之高、新展品之多创下历史之最。高校展区在规模、能级和展品上均也创下新高。工博会系列报道深入探讨了高校科技发展的重要性和多方面影响。…

2022年全国硕士研究生入学统一考试管理类专业学位联考英语(二)试题

文章目录 2022年全国硕士研究生招生考试英语&#xff08;二&#xff09;试题Section I Use of EnglishSection II Reading ComprehensionText 12122232425 Text 22627282930 Text 33132333435 Text 43637383940 Section III TranslationSection III WritingPart APart B 2022年…

爬虫爬取百度图片、搜狗图片

通过以下代码可以爬取两大图片网站&#xff08;百度和搜狗&#xff09;的图片&#xff0c;对于人工智能、深度学习中图片数据的搜集很有帮助&#xff01; 一、爬取百度图片 该代码可以爬取任意百度图片中自定义的图片&#xff1a; import requests import re import time imp…

Umi-OCR图片批量识别文字工具

OCR software, free and offline. 开源、免费的离线OCR软件。支持截屏/粘贴/批量导入图片&#xff0c;段落排版/排除水印&#xff0c;扫描/生成二维码。内置多国语言库。 项目地址&#xff1a;https://github.com/hiroi-sora/Umi-OCR

2023年第十六届山东省职业院校技能大赛中职组“网络安全”赛项竞赛正式试题

第十六届山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题 目录 一、竞赛时间 二、竞赛阶段 三、竞赛任务书内容 &#xff08;一&#xff09;拓扑图 &#xff08;二&#xff09;A模块基础设施设置/安全加固&#xff08;200分&#xff09; &#xff08;三&#xf…

10.索引

一.索引简介 索引用于快速找出在某个列中有一特定值的行。 不使用索引&#xff0c;MySQL必须从第1条记录开始读完整个表&#xff0c;直到找出相关的行。表越大&#xff0c;查询数据所花费的时间越多。 如果表中查询的列有一个索引&#xff0c;MySQL能快速到达某个位置去搜寻…

浅谈安科瑞ADL200仪表在爱尔兰工厂的应用

摘要&#xff1a;用户端消耗着整个电网80%的电能&#xff0c;用户端智能化用电管理对用户可靠、安全、节约用电有十分重要的意义。构建智能用电服务体系&#xff0c;推广用户端智能多功能仪表、智能用电管理终端等设备用电管理解决方案&#xff0c;实现电网与用户的双向良性互动…

ubuntu22.04识别CH340的问题汇总

一、目的 自己的电脑装的是双系统&#xff0c;ubuntu22.04安装了很久好久没有&#xff08;WSL2确实解决了频繁依赖linux的问题&#xff09;。昨天尝试搞一下STM32MP135的系统搭建&#xff0c;开始启用ubuntu22.04。但是遇到了很多问题&#xff0c;其中一个问题就是CH340的驱动…

Python从入门到精通(黑马课程)

目录 运算符 数字运算符 比较运算符 逻辑运算符 转义字符 变量使用 变量定义 变量类型 变量命名 变量函数 input函数 type函数 条件语句 If 格式 案例1&#xff0c;判断年龄 案例2&#xff0c;借钱 案例3&#xff0c;and、or应用 循环语句 for 格式 案例…

11月28日星期二今日早报简报微语报早读

11月28日星期二&#xff0c;农历十月十六&#xff0c;早报微语早读。 1、广电总局&#xff1a;有线电视终端系统默认设置应为“开机进入全屏直播”&#xff1b; 2、我国下一代互联网技术专利申请量10年超170万件&#xff1b; 3、字节收缩旗下游戏业务&#xff1a;已上线的游…

KaiwuDB 多模数据库-时序性能优化

随着物联网领域的快速发展&#xff0c;时序数据的产生和处理需求不断增长。为了满足实时性、高效性和准确性的要求&#xff0c;数据库需要进行时序性能优化&#xff0c;以提供快速的数据写入、实时查询和高效的数据存储与处理能力。 本期直播介绍了时序数据和时序数据库特征以…

第二十章总结

线程简介 在 Java 中&#xff0c;并发机制非常重要。在以往的程序设计中&#xff0c;我们都是一个任务完成后再进行下一个任务&#xff0c;这样下一个任务的开始必须等待前一个任务的结束。Java 语言提供了并发机制&#xff0c;程序员可以在程序中执行多个线程&#xff0c;每一…

助力企业实现更简单的数据库管理,ATOMDB 与 TDengine 完成兼容性互认

为加速数字化转型进程&#xff0c;当下越来越多的企业开始进行新一轮数据架构改造升级。在此过程中&#xff0c;全平台数据库管理客户端提供了一个集中管理和操作数据库的工具&#xff0c;提高了数据库管理的效率和便利性&#xff0c;减少了人工操作的复杂性和错误率&#xff0…

jquery 地址四级联级显示 不默认选择

代码效果 <body class"bgca"><img src"./files/joinTooBg.png" style"width: 100%;object-fit: cover;" alt""><!--填写申请资料--><section><div class"zi-liao"><h3 class"zong-h…

AMP State Evolution的计算:以伯努利先验为例

AMP State Evolution (SE)的计算 t 1 t1 t1时&#xff0c; E ( t ) E [ X 2 ] \mathcal E^{(t)} \mathbb E [X^2] E(t)E[X2]&#xff0c;SE的迭代式为 τ r ( t ) σ 2 1 δ E ( t ) E ( t 1 ) E ∣ η ( t ) ( X Z ) − X ∣ 2 , Z ∼ N ( 0 , τ r ( t ) ) \begin{a…