react v18 +react-redux v6 +react-router-dom v6实现动态添加路由（路由表根据后端返回）

react v18 + ts +react-router-dom v6 +react redux v8 如何实现动态路由，我的想法是，在一开始有一个登录的路由，保证可以正常进入，然后，登录时会调用一个后端接口，返回其他路由，然后我保存在react redux里面，并且从react redux读取出去，添加到当前的路由表中。当然每次刷新页面的时候会重新调用后端路由接口，保证路由一直存在,并且只有登录状态就是判断token是否存在，才能访问接口传来的路由，如果不是登录状态就跳转登录

//模拟接口返回路由
const routers = [
  {
    path: "/Bbb",
    element: "Bbb",
    //权限信息
    mate: {
      add: true,
      del:false
    },
  },
  {
    path: "/Home",
    element: "Home",
    mate: {
      add: true,
    },
  },
  {
    path: "/Aaa",
    element: "Aaa",
  },
]

这是app.tsx 

function App() {
  const location = useLocation()
  //获取react-redux中的保存的路由
  const routes = useSelector((state: any) => state.route)
  const dispatch = useDispatch()
  //切换页面时调用
  useEffect(() => {
    //取消请求
    requestManager.cancelAllRequests()
    if (routes) {
      //模拟刷新路由丢失重新请求
      dispatch({ type: "addRoute", data: routers })
    }
    return () => {
      // 在组件卸载时执行清理操作（可选）
    }
  }, [location])

  return (
    <Routes>
      <Route
        path="/"
        element={
          <Appraisal>
            <Home />
          </Appraisal>
        }
      ></Route>
      <Route path="/Login" element={<Login />}></Route>
      {routes.map((rou: { path: string | undefined; element: string }) => {
        return (
          <Route
            key={rou.path}
            path={rou.path}
            element={
              <React.Suspense fallback={<div>Loading...</div>}>
                {/*
                  调用 startTransition 函数来处理悬挂的更新
                */}
                <Appraisal>{lazyLoad(rou.element)}</Appraisal>
              </React.Suspense>
            }
          ></Route>
        )
      })}
      {/* 默认路由，重定向到登录页面 */}
      <Route
        path="/*"
        element={
          <React.Suspense fallback={<div>Loading...</div>}>
            <Appraisal>
              {/*
                在这里进行登录状态的判断，并根据需要进行重定向
              */}
              {checkLoginStatus() ? <Home /> : <Login />}
            </Appraisal>
          </React.Suspense>
        }
      ></Route>
    </Routes>
  )
}

function checkLoginStatus() {
  // 假设你有一个名为 `isLoggedIn` 的状态来表示登录状态
  const isLoggedIn = sessionStorage.getItem("token")
  return isLoggedIn
}
export default App

这是登录

const Login = () => {
  const navigate = useNavigate()
  const dispatch = useDispatch()

  const routers = [
    {
      path: "/Bbb",
      element: "Bbb",
      mate: {
        auth: true,
      },
    },
    {
      path: "/Home",
      element: "Home",
      mate: {
        auth: true,
      },
    },
    {
      path: "/Aaa",
      element: "Aaa",
    },
  ]
  const addNum = async () => {
    const data = {
      pt_account: "aaaa",
      pt_pwd: "123456",
    }
    const res = await PostLogin(data)
    if (res.data.code == 200) {
      //保存token
      sessionStorage.setItem("token", res.data.token)
      //保存路由
      dispatch({ type: "addRoute", data: routers })
      navigate("/Home")
    }
  }

  return (
    <>
      <button onClick={addNum}> 登录</button>
    </>
  )
}

export default Login

 大概就是这样了，react小白，如果有不对，或者有优化的话，希望可以指出来，谢谢大家了