react+router v6+tedux+ts踩到的坑

今天，给大家分享一个我写基于react+router v6+tedux+ts一个用户管理系统的小练习，中间也很波折，以前觉得很简答，但确实踩了不少的坑，尤其在redux和router方面，踩了好多坑，今天就来给大家分享一下我踩得坑，以免大家会踩到。

咱就从redux的配置开始说起吧，redux加ts我也是第一次写，刚开始写的时候确实费了不少劲，但等了一会，就还好吧

一、redux安装问题

第一个问题就是redux的配置安装问题，首先安装redux，需要安装

1、redux的类型声明文件

2、redux开发者工具

3、支持异步的工具

4、redux

yarn add redux-thunk redux-devtools-extension redux react-redux @types/react-redux

注意：一定要安装redux的类型配置文件

二、路由的导航守卫功能（v6）

由于react-router是没有导航守卫功能的，这里我查阅到的资料是这样的，除自己实现的守卫除外，然后我就冥思苦想，这没登录用户不能访问我的后台吧，这是一个问题，很大的问题，经过思考想到了一种模仿vue的导航守卫的实现方法，那就是利用react的组件实现，俗话说react中万物皆为组件，组件简直无所不能，我的思路如下：

• 在src下创建一个components文件夹在里面创建一个专门用于导航守卫的组件，在组件内些路由占位符，然后把组件引入到根组件中

代码如下

守卫组件：
import React,{useState} from "react";
import { useOutlet} from "react-router-dom";
import {Navigate} from "react-router-dom";
import router from "../../routes";
export default function VerifyRoute(){
    //路由站位符
    const Outlet=useOutlet(router)
    //写入token
    const token=localStorage.getItem('token')
    return(
        
//此处用于验证token是否存在，如果不存在就路由重定向到登录界面
            {token?Outlet:}
        
    )
}
根组件：

    

因为我用的是路由表

这样就实现了一个简单的导航守卫，当然要想添加别的规则也可以去组件里面添加去验证，这里只是一个简答 的小练习

要想实现一个真正的导航守卫，当然也要考虑到加入用户输入的网址不对，就给用户跳到404界面或者登陆页面，当然要去写一个啦啊，但依靠组件有点乏力，有一个超级简单 的方法，去实现它，那就是使用react路由的统配符来实现，简单方便快捷。代码如下，

export default [
    //路由规则
{path:'/xxx',element:},
    {path: '/xxx',element: ,
    children:[
        {path:'xxx',element:},
        {path:'xxx',element:},
        {path: 'usexxrdetail',element: },
        {path:'',element:},
        {path: '*',element: }
    ]},
    {path: '/',element: },
    // 当用户输入到保存在的路由使用通配符来重定向
    {path: '*',element: }
]
这个加进去就好啦，当然不非得去跳登录页面也可以去返回用的上一页面也是可以的这里仁者见仁，智者见智了。

这样一个基本完整的导航守卫就实现了，总体来说实现还是非常不错滴

接下来介绍的还是一个关于编程式导航的坑

• 这个刚开始我以为跟路由表里嵌套路由定义的一样还是写一个不用写完整的路径，当我这么写了之后，一个坑我自己跳下去了，脸都丢尽了哈哈哈，竟然需要写完整的路径。

下面就是一个filter过滤的问题也不算是filter的问题吧就是react机制的原因，问题是这样的，加入在我将filter这个过滤数组的直接写在return（）我们操作redux数据的时候会使视图更新，上面这样会重复过滤数组，导致数组为空，然后报错，因为react的机制问题，就是当数据发生改变，react底层会对原来的数据进行比较然后去刷新视图，这样就导致了我们filter重复执行，有两种解决办法

• 第一种就是通过shouldComponentUpdate（）钩子函数手动去控制视图的更新其实这里是不建议的，因为如果是函数组件的话也不支持，因为在18版本官方在推函数组件和hook了所以这里不建议。
• 第二种就是将这个filter函数写在一个事件中，这里可以写在跳转到页面的一瞬间让filter去过滤数据然后将数据发给后面的组件。这种方法实现起来简单。  

三、还有就是一些ts代码规范问题

这里我是建议大家在src下创建一个主要管理类型声明的文件，然后将这些声明写到单独的文件中，这样便于修改和别的文件调用，避免重复声明类型代码。省去了好多事。

好啦，今天就给大家分享到这，这也是一个小练习，大家可以参考一下避一下坑！！！