react-6 路由 - ts爆红解决 - 封装路由:::

news/2025/2/23 15:39:11

a) 安装路由库 5 版本的

//下载router
npm i react-router-dom@5



//下载去除 路径报错的插件
npm i --save-dev @types/react-router-dom

开启配置 允许导入:tsx:因为项目是基于TS的

 b) 相关组件

路由管理组件

BrowserRouter   使用 HTML5 历史记录 APIpushStatereplaceState popstate 事件)的<Router>来保持您的 UI URL 同步。

HashRouter      使用 URL 哈希部分(即 window.location.hash)的<Router>来保持您的 UI URL 同步

index.tsx 中:

 使用路由组件 :需要使用什么路由自带组件就从 react-router-dom中导入

 路由组件的切换,存在挂载和卸载:所以要优化

导入组件

<Router path=" " component={ } />

<Redirect />  组件用于重定向,但是不生效,需要配合switch组件

<Switch> </Switch>  组件包裹路由规则,

<Router path="*" component={ NotFound } />    其他路由要加 exact ,不加就默认以什么什么开始都可以匹配,不进404页面:但是:exact 精确匹配:有二级路由的时候取消

重定向

 

 404页面 <Router path="*" component={ NotFound } />

exact 精确匹配:有嵌套路由的取消

c) 声明式导航

<Link to=" "></Link>  渲染成a标签

<NavLink to=" "></NavLink> 渲染成a标签会在自身的路由地址和浏览器的路由地址匹配成功时,自动添加active类

 二级路由跳转

 使用的组件需要导入

 匹配成功的路由。匹配到哪里就在哪个页面渲染。switch提前占位,后边会被组件替换,路由规则本身就是个动态组件

d) 编程式导航:::方便

 this.props.history 负责跳路由

this.props.location 负责存储路由信息(地址,参数)

this.props.match 负责存储路由信息(地址,参数)

 props.history.push()  //跳转路由

props.history.replace() 

props.history.go()  //前进 or 后退 

props.history.goBack() //后退 

props.history.goForward()  //前进

父中子组件没有路由,但是想跳路由,那就要导入路由,传参,ts一定传好(3个)

 解决 TS 报错:

以下包含编程式导航的跳转

比如组件中使用了

 

 事件对象通过button 触发

 

 

 3. 路由参数

 

 

封装路由:::

javascript">// router下routerConfig.ts
//路由表
//配置整个项目的路由
import { lazy } from 'react'

var Index = lazy(()=>import('../views/Index/index.tsx'))
var Login = lazy(()=>import('../views/Login/index.tsx'))
var Detail = lazy(()=>import('../views/Detail/index.tsx'))
var NotFound = lazy(()=>import('../views/NotFound/index.tsx'))

var Home = lazy(()=>import('../views/Index/Home'))
var Cate = lazy(()=>import('../views/Index/Cate'))
var Gwc = lazy(()=>import('../views/Index/Gwc'))
var Mine = lazy(()=>import('../views/Index/Mine'))

export default [
    {
        path:'/index',
        component:Index,
        children:[
            {
                path:'/index/home',
                component:Home,
            },
            {
                path:'/index/cate',
                component:Cate,
            },
            {
                path:'/index/gwc',
                component:Gwc,
            },
            {
                path:'/index/mine',
                component:Mine,
            },
            {
                from:'/index',
                to:'/index/home',
            },
            {
                path:'*',
                component:NotFound,
            }
        ]
    },
    {
        path:'/login',
        component:Login,
    },
    {
        path:'/detail',
        component:Detail,
    },
    {
        from:'/',
        to:'/index',
    },
    {
        path:'*',
        component:NotFound,
    },
]

javascript">// routerView.tsx

import React, { Component,Suspense } from 'react';
import {Route,Redirect,Switch} from 'react-router-dom'
//根据路由配置表 动态渲染路由规则( Route,Redirect )
//RouterView组件 根据外部传入的路由配置表, 动态渲染路由规则( Route,Redirect )

interface RouteItem {
    path?:string,
    component?:any,
    children?:Array<RouteItem>,
    from?:string,
    to?:string
}

interface Props {
    routes: Array<RouteItem>
}
class RouterView extends Component<Props> {
    render() {
        return (
            <Suspense fallback={<div className='loading'>loading....</div>}>
                <Switch>
                    {
                        this.props.routes.map((item,index)=>{
                            //如果有from属性 渲染重定向路由
                            if( item.from ){
                                return <Redirect exact from={item.from} to={item.to||''} />
                            }
                            //如果有children属性 用render渲染路由( 对应的组件会通过routes属性传入其内部需要用到的嵌套路由配置表 )
                            else if( item.children ){
                                return (
                                    <Route path={item.path} render={()=>{
                                        return <item.component routes={item.children} />
                                    }} />
                                )
                            }else{ //其他情况 用component渲染路由
                                return (
                                    <Route path={item.path} component={item.component} />
                                )
                            }
                        })
                    }
                </Switch>
            </Suspense>
        );
    }
}

export default RouterView;

使用

 

文章来源:https://blog.csdn.net/qq_60839348/article/details/130149156
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.niftyadmin.cn/n/235086.html

相关文章

01-SpringBoot入门应用

入门程序&#xff1a;使用SpringBoot开发一个web应用&#xff0c;浏览器发起请求/hello后&#xff0c;给浏览器返回字符串“Hello World ~” 1. 创建springboot工程&#xff0c;并勾选web开发相关依赖 由于我的idea没有Spring Initializr选项&#xff0c;所以我选择使用Maven…

第三章apache配置与应用

构建虚拟 Web 主机 虚拟Web主机指的是在同一台服务器中运行多个Web站点&#xff0c;其中每一个站点实际上并不独立占用整个服务器&#xff0c;因此被称为“虚拟”Web 主机。通过虚拟 Web 主机服务可以充分利用服务器的硬件资源&#xff0c;从而大大降低网站构建及运行成本。 使…

代码随想录二刷-哈希表-有效的字母异位词及其相关题目(JS)

242.有效的字母异位词 题目 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 t 中每个字符出现的次数都相同&#xff0c;则称 s 和 t 互为字母异位词。 示例 1: 输入: s “anagram”, t “nagaram” 输出: tr…

笔试强训之【两种排序方法和最小公倍数】

目录1.两种排序方法1.1题目1.2解题思路1.3代码2.最小公倍数2.1题目2.2解题思路2.3代码3.选择题1.两种排序方法 1.1题目 链接: link 描述 考拉有n个字符串字符串&#xff0c;任意两个字符串长度都是不同的。考拉最近学习到有两种字符串的排序方法&#xff1a; 1.根据字符串的字…

【致敬未来的攻城狮计划】— 连续打卡第一天:提前对CPK_RA2E1是瑞萨RA系列开发板的初体验,了解一下(文字上的初理解)

系列文章目录 系列文章目录 前言 一、瑞萨MCU&#xff08;CPK_RA2E1是瑞萨RA系列开发板&#xff09;是什么&#xff1f; 首先引入是什么&#xff1f; 他的优势在哪&#xff1f; 瑞萨CPK_RA2E1 对标stm32 相似之处和不同之处&#xff1f; 瑞萨CPK_RA2E1如何开发&#xff…

关于毕业生吐槽导师不管不指导毕业论文的在线平台的设计

目录 1、平台设计 2、技术路线 3 、设计难点 4、盈利方式 5、可以接入哪些类型的广告 6、活动举办 6.1 活动目标&#xff1a; 6.2 活动流程&#xff1a; 6.3活动推广&#xff1a; 6.4 活动收益&#xff1a; 7 活动经费来源 8 该活动社会意义 9 平台免责声明 10 怎…

C++ const常量、常函数和常量对象

目录 常量 特性 初始化 初始化顺序 常函数 定义 回顾常量指针与指针常量 指针安全级别升级、降级问题 常函数特性 常函数与其他函数之间的调用 在常函数中修改变量 常量对象 定义 测试mutable关键字 总结 常量 常函数 常量对象 常量 特性 定义就必须初始化…

PS学习记录-基础操作与快捷键

1、复制图层 在【移动工具】状态下&#xff0c;配合【alt】按键拖动图像&#xff0c;可以进行复制图层 当然&#xff0c;PS里复制图层的方式很多&#xff0c;比如&#xff1a;选中图层&#xff0c;按【ctrlJ】&#xff0c;也是复制图层 2、多选图层 2.1同上&#xff0c;也是…