react项目中使用后端返回的JSON数据生成路由

已于 2023-08-16 16:41:41 修改
阅读量737 收藏 1
点赞数 2
文章标签： react.js json 前端
于 2023-08-16 16:34:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiZiRuanJianKeJi/article/details/132321865
版权

​

问题背景

​​在这里插入图片描述

近期一个项目，一个官网管理系统，左侧有这些菜单。菜单通常是根据router路由来生成的。在以往的一些管理系统方案中，菜单的权限 通常是 给每个路由约定一个权限key，在用户登录后，调用后端的权限数据接口，比如 数据面板的key是1，全局配置的key是2。获取到的数据权限数组= [ 1 ]，则表示 这个用户有数据面板的权限，没有2，则这个用户没有全局配置的权限。前端在是否渲染这个菜单和是否跳转到404（您无权限查看）就是判断要跳转的页面的key是否在后端返回的权限列表中。

let routes = [

    {
        path: "/",
        element: <MainFrame />,
        // element: <Navigate to="/home" />,

        id: "300001",
        tabs: false,
        menu: true,
        meta: {
            title: "根路径",
        },
        // children: [
        //     {
        //         key: 'home',
        //         path: 'home',
        //         menu: false,
        //         element: <MainFrame />
        //     }
        // ]
        // children: [
        //     {
        //         key: "dathboard",
        //         path: "dathboard",
        //         menu: true,
        //         id: "0000001",
        //         icon: <PieChartOutlined />,
        //         element: withLoadingComponent(<WorkBench />)
        //         meta: {
        //             title: '数据面板',
        //             accessId: '',
        //             hideMenu: false,
        //             noAuth: true,
        //         },
        //     },
        //     {
        //         path: "globalConfig",
        //         key: 'globalConfig',
        //         id: '300000',
        //         icon: <SettingOutlined />,
        //         menu: true,
        //         meta: {
        //             title: "全局配置"
        //         },
        //         children: [
        //             {
        //                 path: 'module',
        //                 key: 'module',
        //                 id: '300010',
        //                 menu: true,
        //                 icon: <UngroupOutlined />,
        //                 meta: {
        //                     title: "模型管理"
        //                 }
        //             },
        //             {
        //                 path: 'moduleFiled',
        //                 key: 'moduleFiled',
        //                 id: '300020',
        //                 menu: true,
        //                 icon: <DeploymentUnitOutlined />,
        //                 meta: {
        //                     title: "模型字段"
        //                 }
        //             }
        //         ]
        //     },
        //     {
        //         path: "article",
        //         key: "article",
        //         id: "400000",
        //         icon: <FolderOpenOutlined />,
        //         menu: true,
        //         meta: {
        //             title: "内容管理"
        //         },
        //         children: [
        //             {
        //                 path: "news",
        //                 key: "news",
        //                 id: "400010",
        //                 menu: true,
        //                 icon: <ReadOutlined />,
        //                 element: withLoadingComponent(<NewsView />),
        //                 meta: {
        //                     title: "新闻中心"
        //                 },
        //                 // children: [
        //                 //     {
        //                 //         path: "new-add",
        //                 //         key: "new-add",
        //                 //         id: "400011",
        //                 //         element: withLoadingComponent(<AddNews />),
        //                 //         menu: true,
        //                 //         meta: {
        //                 //             title: "新闻发布",
        //                 //             accessId: '',
        //                 //             hideMenu: false,
        //                 //             noAuth: true
        //                 //         }
        //                 //     },
        //                 //     {
        //                 //         path: 'news-list',
        //                 //         key: "news-list",
        //                 //         id: "400012",
        //                 //         menu: true,
        //                 //         element: withLoadingComponent(<NewsList />),
        //                 //         meta: {
        //                 //             title: "新闻列表",
        //                 //             accessId: "",
        //                 //             hideMenu: false,
        //                 //             noAuth: true
        //                 //         }
        //                 //     }
        //                 // ]
        //             },
        //             {
        //                 path: "product",
        //                 key: "product",
        //                 id: "400020",
        //                 menu: true,
        //                 icon: <ReadOutlined />,
        //                 element: withLoadingComponent(<ProductView />),
        //                 meta: {
        //                     title: "产品中心"
        //                 },
        //                 // children: [
        //                 //     {
        //                 //         path: "add",
        //                 //         key: "add",
        //                 //         id: "400021",
        //                 //         element: withLoadingComponent(<AddProduct />),
        //                 //         menu: true,
        //                 //         meta: {
        //                 //             title: "产品发布",
        //                 //             accessId: '',
        //                 //             hideMenu: false,
        //                 //             noAuth: true
        //                 //         }
        //                 //     },
        //                 //     {
        //                 //         path: 'list',
        //                 //         key: "list",
        //                 //         id: "400022",
        //                 //         menu: true,
        //                 //         element: withLoadingComponent(<ProductList />),
        //                 //         meta: {
        //                 //             title: "产品列表",
        //                 //             accessId: "",
        //                 //             hideMenu: false,
        //                 //             noAuth: true
        //                 //         }
        //                 //     }
        //                 // ]
        //             },
        //             {
        //                 path: "about",
        //                 key: "about",
        //                 id: "400030",
        //                 icon: <ReadOutlined />,
        //                 menu: true,
        //                 element: withLoadingComponent(<AboutUs />),
        //                 meta: {
        //                     title: "关于我们"
        //                 },
        //             },
        //             {
        //                 path: "brand",
        //                 key: "brand",
        //                 id: "400040",
        //                 menu: true,
        //                 icon: <ReadOutlined />,
        //                 element: withLoadingComponent(<BrandView />),
        //                 meta: {
        //                     title: "品牌文化"
        //                 },

        //             },
        //             {
        //                 path: "server",
        //                 key: "server",
        //                 id: "400050",
        //                 menu: true,
        //                 icon: <ReadOutlined />,
        //                 element: withLoadingComponent(<ServiceView />),
        //                 meta: {
        //                     title: "客户服务"
        //                 },

        //             },
        //             {
        //                 path: 'pubinfo',
        //                 key: 'pubinfo',
        //                 id: "400060",
        //                 menu: true,
        //                 icon: <ReadOutlined />,
        //                 element: withLoadingComponent(<PublicView />),
        //                 meta: {
        //                     title: "公开信息"
        //                 },
        //             },

        //         ],

        //     },
        //     {
        //         path: "set",
        //         key: "set",
        //         id: "500000",
        //         menu: true,
        //         icon: <GlobalOutlined />,
        //         meta: {
        //             title: "网站管理"
        //         },
        //         children: [
        //             {
        //                 path: "base-set",
        //                 key: "base-set",
        //                 id: "5000001",
        //                 menu: true,
        //                 icon: <HddOutlined />,
        //                 element: withLoadingComponent(<BaseSetView />),
        //                 meta: {
        //                     title: "网站配置"
        //                 },

        //             },
        //             {
        //                 path: "setBanner",
        //                 key: "setBanner",
        //                 id: "500002",
        //                 icon: <PictureOutlined />,
        //                 element: withLoadingComponent(<BannerSetView />),
        //                 menu: true,
        //                 meta: {
        //                     title: "轮播图片"
        //                 },

        //             },
        //             {
        //                 path: "cate-set",
        //                 key: "cate-set",
        //                 id: "500004",
        //                 icon: <ProfileOutlined />,
        //                 element: withLoadingComponent(<CateView />),
        //                 menu: true,
        //                 meta: {
        //                     title: "栏目设置"
        //                 },

        //             },
        //             {
        //                 path: "float-advert",
        //                 key: "float-advert",
        //                 icon: <OneToOneOutlined />,
        //                 element: withLoadingComponent(<FloatAdvertView />),
        //                 id: "500005",
        //                 menu: true,
        //                 meta: {
        //                     title: "侧边浮窗"
        //                 },

        //             },
        //             {
        //                 path: "advert",
        //                 key: "advert",
        //                 icon: <StarOutlined />,
        //                 element: withLoadingComponent(<FloatAdvertView />),
        //                 id: "500006",
        //                 menu: true,
        //                 meta: {
        //                     title: "广告管理"
        //                 },

        //             },
        //             {
        //                 path: "security",
        //                 key: "security",
        //                 icon: <UnlockOutlined />,
        //                 element: withLoadingComponent(<SafeConfig />),
        //                 id: "500007",
        //                 menu: true,
        //                 meta: {
        //                     title: "安全配置"
        //                 },

        //             },
        //             {
        //                 path: "access",
        //                 key: "access",
        //                 icon: <HistoryOutlined />,
        //                 element: withLoadingComponent(<VisitorLogList />),
        //                 id: "500008",
        //                 menu: true,
        //                 meta: {
        //                     title: "访问统计"
        //                 },

        //             },
        //         ],

        //     },
        //     {
        //         path: 'member',
        //         key: 'member',
        //         id: '600000',
        //         menu: false,
        //         icon: <WindowsOutlined />,
        //         meta: {
        //             title: '会员管理'
        //         }
        //     },
        //     {
        //         path: 'system',
        //         key: 'system',
        //         id: '700000',
        //         menu: true,
        //         icon: <SettingOutlined />,
        //         meta: {
        //             title: '系统管理'
        //         },
        //         children: [
        //             {
        //                 path: 'permission',
        //                 key: 'permission',
        //                 id: '700010',
        //                 menu: true,
        //                 icon: <SecurityScanOutlined />,
        //                 element: withLoadingComponent(<PerMissionView />),
        //                 meta: {
        //                     title: '角色权限'
        //                 }
        //             },
        //             {
        //                 path: 'operationLog',
        //                 key: 'operationLog',
        //                 id: '700020',
        //                 menu: true,
        //                 icon: <ScheduleOutlined />,
        //                 element: withLoadingComponent(<SystemLogList />),
        //                 meta: {
        //                     title: '系统日志'
        //                 }
        //             },
        //             {
        //                 path: 'account',
        //                 key: 'account',
        //                 id: '700030',
        //                 menu: true,
        //                 icon: <UserOutlined />,
        //                 element: withLoadingComponent(<SystemUserList />),
        //                 meta: {
        //                     title: '系统用户'
        //                 }
        //             },
        //         ]
        //     }
        // ]
    },
    {
        path: "login",
        menu: false,
        element: withLoadingComponent(<Login />)
    },
    {
        path: "*",
        menu: false,
        element: withLoadingComponent(<Page404 />)
    }
]

但是涉及到内容管理系统，则存在一个需求可能 性，即 内容管理 下面这6个项，现在是只有6个项，而后期可能会有7个项，比如，通过如下 的栏目配置 新建一一个顶级栏目，
在这里插入图片描述

那么这个栏目和 公开信息那一栏平级，在内容管理那里 公开信息 下面就应该会有出现 刚刚添加的一级栏目。
在这里插入图片描述

所以，就决定把整路由部分由后端来进行返回，即前面示例代码中的那些。

后端返回的路由数据

决定把整个路由后端返回，所以，后端nodeJs返回JSON数据如下：

  ctx.body = {
    status: "0000",
    message: "菜单权限获取成功",
    data: {
      list: [
        {
          key: "dathboard",
          path: "dathboard",
          menu: true,
          id: "0000001",
          icon: `PieChartOutlined`,
          element: `WorkBench`,
          meta: {
            title: '数据面板',
            // accessId: '',
            // hideMenu: false,
            // noAuth: true,
          },
        },
        {
          path: "globalConfig",
          key: 'globalConfig',
          id: '300000',
          icon: `SettingOutlined`,
          menu: true,
          meta: {
            title: "全局配置"
          },
          children: [
            {
              path: 'module',
              key: 'module',
              id: '300010',
              menu: true,
              icon: `UngroupOutlined`,
              meta: {
                title: "模型管理"
              }
            },
            {
              path: 'moduleFiled',
              key: 'moduleFiled',
              id: '300020',
              menu: true,
              icon: `DeploymentUnitOutlined`,
              meta: {
                title: "模型字段"
              }
            }
          ]
        },
        {
          path: "article",
          key: "article",
          id: "400000",
          icon: `FolderOpenOutlined`,
          menu: true,
          meta: {
            title: "内容管理"
          },
          children: [
            {
              path: "news",
              key: "news",
              id: "400010",
              menu: true,
              icon: `ReadOutlined`,
              element: 'NewsView',
              meta: {
                title: "新闻中心"
              },

            },
            {
              path: "product",
              key: "product",
              id: "400020",
              menu: true,
              icon: `ReadOutlined`,
              element: `ProductView`,
              meta: {
                title: "产品中心"
              },
            },
            {
              path: "about",
              key: "about",
              id: "400030",
              icon: `ReadOutlined`,
              menu: true,
              element: `AboutUs`,
              meta: {
                title: "关于我们"
              },
            },
            {
              path: "brand",
              key: "brand",
              id: "400040",
              menu: true,
              icon: `ReadOutlined`,
              element: `BrandView`,
              meta: {
                title: "品牌文化"
              },

            },
            {
              path: "server",
              key: "server",
              id: "400050",
              menu: true,
              icon: `ReadOutlined`,
              element: `ServiceView`,
              meta: {
                title: "客户服务"
              },

            },
            {
              path: 'pubinfo',
              key: 'pubinfo',
              id: "400060",
              menu: true,
              icon: `ReadOutlined`,
              element: `ServiceView`,
              meta: {
                title: "公开信息"
              },
            },

          ],

        },
        {
          path: "set",
          key: "set",
          id: "500000",
          menu: true,
          icon: `GlobalOutlined`,
          meta: {
            title: "网站管理"
          },
          children: [
            {
              path: "base-set",
              key: "base-set",
              id: "5000001",
              menu: true,
              icon: `HddOutlined`,
              element: `BaseSetView`,
              meta: {
                title: "网站配置"
              },

            },
            {
              path: "setBanner",
              key: "setBanner",
              id: "500002",
              icon: `PictureOutlined`,
              element: `BannerSetView`,
              menu: true,
              meta: {
                title: "轮播图片"
              },

            },
            {
              path: "cate-set",
              key: "cate-set",
              id: "500004",
              icon: `ProfileOutlined`,
              element: `CateView`,
              menu: true,
              meta: {
                title: "栏目设置"
              },

            },
            {
              path: "float-advert",
              key: "float-advert",
              icon: `OneToOneOutlined`,
              element: `FloatAdvertView`,
              id: "500005",
              menu: true,
              meta: {
                title: "侧边浮窗"
              },

            },
            {
              path: "advert",
              key: "advert",
              icon: `StarOutlined`,
              element: `FloatAdvertView`,
              id: "500006",
              menu: true,
              meta: {
                title: "广告管理"
              },

            },
            {
              path: "security",
              key: "security",
              icon: `UnlockOutlined`,
              element: `SafeConfig`,
              id: "500007",
              menu: true,
              meta: {
                title: "安全配置"
              },

            },
            {
              path: "access",
              key: "access",
              icon: `HistoryOutlined`,
              element: `VisitorLogList`,
              id: "500008",
              menu: true,
              meta: {
                title: "访问统计"
              },

            },
          ],

        },
        {
          path: 'member',
          key: 'member',
          id: '600000',
          menu: false,
          icon: `WindowsOutlined`,
          meta: {
            title: '会员管理'
          }
        },
        {
          path: 'system',
          key: 'system',
          id: '700000',
          menu: true,
          icon: `SettingOutlined`,
          meta: {
            title: '系统管理'
          },
          children: [
            {
              path: 'permission',
              key: 'permission',
              id: '700010',
              menu: true,
              icon: `SecurityScanOutlined`,
              element: `PerMissionView`,
              meta: {
                title: '角色权限'
              }
            },
            {
              path: 'operationLog',
              key: 'operationLog',
              id: '700020',
              menu: true,
              icon: `ScheduleOutlined`,
              element: `SystemLogList`,
              meta: {
                title: '系统日志'
              }
            },
            {
              path: 'account',
              key: 'account',
              id: '700030',
              menu: true,
              icon: `UserOutlined`,
              element: `SystemUserList`,
              meta: {
                title: '系统用户'
              }
            },
          ]
        }
      ]
    }
  }

​后端返回权限路由，那么，就开发本地只保留*路由和login路由，因为这部分路由本地必须 要有。所以routes的如下：

let routes = [

    {
        path: "/",
        element: <MainFrame />,
        // element: <Navigate to="/home" />,

        id: "300001",
        tabs: false,
        menu: true,
        meta: {
            title: "根路径",
        },
		children:[],   //从后端请求返回来的数据就要放进这里面。
    {
        path: "login",
        menu: false,
        element: withLoadingComponent(<Login />)
    },
    {
        path: "*",
        menu: false,
        element: withLoadingComponent(<Page404 />)
    }
]

const setRoutes = (list) => {
    routes = list
}

export {
    setRoutes
}

export default routes;

即 从后端返回来的路由数据就放进routes[0].chilren 里面。当然，这个文件中默认导出routes，同时也导出setRoutes方法来改变这个routes数据。所以routes没有按平时的习惯写成const常量，得写成变量。

路由鉴权

路由鉴权这部分好说，主要是登录，判断用户是否登录，没有登录就给它跳转到登录页面，否则允许 它跳到需要的页面。在下面的示例中，如果跳转的是登录页面并且已经有token即已经登录，则返回到主页。如果不是跳到登录页面又没有token即没有登录，则跳到登录，重点是 return <Routers /> 这个组件

路由鉴权组件：

const AuthRouter = () => {
    const location = useLocation();
    let token = getToken();
    if (location.pathname === "/login" && token) {
        return <ToHome />
    }
    if (location.pathname !== "/login" && !token) {
        return <ToLogin />
    }
    return <Routers />
}
export default AuthRouter;

Routers组件：



const Route = ({ routes }) => {
    let outer = useRoutes(routes)
    return outer
}


const Routers = () => {
    const [loading, setLoading] = useState(false)
    const [curRoutes, setCurRoutes] = useState([...routes]);

    // 动态获取路由
    const getRoutes = () => {
        http.post({
            url: "/admin_users-api/getMenu",
            before: () => setLoading(true),
            params: {},
            success: (res) => {
                if (res.status === "0000") {
                    let list = routes;
                    list[0].children = getRouteList(res?.data?.list)
                    setCurRoutes(list)
                    setRoutes(list)
                }
            },
            failure: () => { },
            complete: () => setLoading(false)
        })
    }
    useEffect(() => {
        getRoutes()
    }, [])

    return loading ? <>
        <LayoutLoad />
    </> : <Route routes={curRoutes} />
}
export default Routers;

Routers组件中useEffect生命周期调用获取路由数据的函数。在拿到路由后，通过调用导入的setRoutes函数来改变routes路由数据数据，并且赋值给到组件本身的curRoutes状态。而curRoutes状态更新了，就会触发重新渲染 <Route routes={curRoutes} /> ，从而实现动态路由。

方案研究中遇到的坑点

  1. 起初的时候return 那里的写法是下面这样的
     return <Route routes={curRoutes} />

即直接返回Route，然后我就遇到404的问题，即 比如我跳转到http://localhost:3000/website-admin/article/about 路径的时候，如果按了浏览器的刷新按钮。会在有一瞬间浏览器会闪过显示404页面。分析了一下，原因是 直接刷新路由的时候，其实是因为还没有获得 /article/about 这个路由，即路由中还没有这个数据。因为还在请求数据当中。所以解决方案是 给一个loading状态，在loading的时候，让它显示加载中，于是就是使用了下面的代码。

    return loading ? <>
        <LayoutLoad />
    </> : <Route routes={curRoutes} />

2.遇到的第二个坑是是在哪里获取权限的问题，在之前的项目中，我们获取用户权限是在MainFrame这个基础组件中获取权限，这两天发现，在上面的情况中，即直接在浏览器地址栏输入http://localhost:3000/website-admin/article/about 的时候，这个组件没有加载到，基础框架组件只有在访问 http://localhost:3000/ 这个根路由的时候才加载。所以昨天调试了好多次，发现获取路由权限就不能像之前那样写在MainFrame组件中。要写在路由鉴权组件这边。

想来想去始终想不到名字
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React router根据路由自动生成路由
weixin_53690696的博客
02-26 520
react react-router 根据路径自动配置路由信息
使用react实现后台管理系统项目
m0_71933813的博客
12-30 9063
一.开发React必须依赖三个库 1.react：包含react所必须的核心代码 2.react-dom：react渲染在不同平台所需要的核心代码 3.babel：将jsx转换成React代码的工具 二.React的依赖引入 1.方式一：直接CDN引入 2.方式二：下载后，添加本地依赖 1).在html中引入 a.react.js b.react-dom.js c.b
react根据后端返回数据动态添加路由
最新发布
qq_68937887的博客
07-08 607
先把动态路由和静态路由分离出来，在路由配置文件中，这里需要进行动态添加的路由为 path: "/backstage"下的子路由，需要给他一个name，后续方便查找。用户登录后先将权限列表存入本地浏览器，再跳转到系统页面，并在首次加载时候获取本地权限列表数据，进行动态渲染。1.根据不同的登录用户，返回不同的权限列表 ，以下是三种不同用户限权列表。在redux中使用动态添加路由的函数。定义一个动态添加路由的函数。
react reouer v6 实现后端路由
m0_53956340的博客
10-19 333
闲来无事,决定用react写一下后端返回路由表,生成路由,写的时候还是有挺多坑的，首先我用springboot写的后端接口来返回路由表的数据mysql做数据库毕竟本人不是专业写后端的就是实现了一些基本的功能例如跨域、mybatisplus、请求拦截、swagger、jwt、代码生成器、异常处理，用这些实现了一些基本的增删改查，至于前端是用的vite react react router v6，至于vite确实比webpack要快很多，不过vite在使用的过程中也是踩过一些坑的，毕竟接触新的东西都是要踩坑的，
react中路由的使用和传递参数问题
你怎么也喜欢嘴巴嘟嘟
03-14 595
两个界面实现步骤 和具体方案 Message.jsx import React, { Component } from "react"; import { Link, Route, Switch } from "react-router-dom"; import Detail from "./Detail"; class Message extends Component { state = { messageArr: [ { id: "01", title: "消息1" },..
react v18 +react-redux v6 +react-router-dom v6实现动态添加路由（路由表根据后端返回）
asdasdsadwsdw的博客
11-22 373
react v18 + ts +react-router-dom v6 +react redux v8 如何实现动态路由，我的想法是，在一开始有一个登录的路由，保证可以正常进入，然后，登录时会调用一个后端接口，返回其他路由，然后我保存在react redux里面，并且从react redux读取出去，添加到当前的路由表中。当然每次刷新页面的时候会重新调用后端路由接口，保证路由一直存在,并且只有登录状态就是判断token是否存在，才能访问接口传来的路由，如果不是登录状态就跳转登录。
通过接收后台返回数据来实现Vue动态路由
一个韩韩韩
02-09 2782
动态路由加载
dummy-react-conf-backend：React Conf网站的后端
02-28
"dummy-react-conf-backend" 是一个专门为React Conf网站创建的虚拟后端服务，它模拟了实际后端的功能，以便于前端开发者进行开发和测试。...项目中可能会使用到各种JavaScript库和工具，以实现高效、安全的后端功能。
FractalAnalysis：具有React前端和Django后端的Todo应用
02-24
5. **状态管理**：项目可能使用了如Redux或Context API等状态管理工具，以便在整个应用中管理和共享数据。 **Django后端** Django是Python的一款强大的Web框架，提供MVT（Model-View-Template）架构模式。在...
ReactKahootClone:具有React前端和Flask后端的Kahoot克隆
05-09
**ReactKahootClone** 是一个项目，它实现了对流行的学习游戏平台Kahoot的克隆，使用了现代Web开发技术栈，包括 **React** 作为前端框架和 **Flask** 作为后端服务器。这个项目旨在展示如何将前端与后端有效地结合，...
Vue3+Vue-Router+Element-Plus根据后端数据实现前端动态路由——权限管理模块
weixin_51604181的博客
09-30 2566
Vue3项目，结合Element-Plus，实现权限管理里的动态路由添加，菜单栏动态渲染，根据用户的权限显示菜单栏目，router 文件根据用户权限返回的菜单数据，动态加载文件，解决前端一大堆静态的路由信息，文章案例可供复制粘贴即可，嘎嘎爽，不会踩坑，坑我已经帮你踩了！！！！
react 点击按钮返回上一级路由
aohudai3633的博客
11-27 2332
在这我是以一个点击图标返回为例的 1. 在要点击的按钮或者图片上添加事件 <img src="images/back.png" alt="" onTouchStart={this.backClick}/> 2. 事件编写 // 点击按钮返回上一个路由 backClick(){ this.props.history.go(-1) ...
ReactRouter学习之旅五：后台动态获取路由进行配置
muAluo的博客
11-14 1380
假设路由不是写死的，而是通过从后台获取的数据来动态改变，例如权限不同的人看到的页面是不一样的。那么这个时候应该怎么样去配置路由呢？ 这里我们通过一个数组来模拟从后台获取的数据，进行一个简单的路由配置。 修改AppRouter.js文件： import React from 'react'; import {BrowserRouter as Router,Route,Link} from 'react-router-dom'; import Index from './Pages/Index'; im
[React路由]
qlee123的博客
09-21 299
React 路由
前端路由、后端路由、react-router区别
halations的博客
06-17 862
后端路由： 后端路由又可称之为服务器端路由，因为对于服务器来说，当接收到客户端发来的HTTP请求，就会根据所请求的相应URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。对于最简单的静态资源服务器，可以认为，所有URL的映射函数就是一个文件读取操作。对于动态资源，映射函数可能是一个数据库读取操作，也可能是进行一些数据的处理，等等。然后根据这些读取的数据，在服务器端就使用相应的模板来对页面进行渲染后，再返回渲染完毕的页面。这种方式在早期的前端开发中非常普遍，比如京东页面就是个后端路由
react中的路由导航
Zy000428的博客
01-11 1699
路由导航（Route Navigation）是指在Web应用程序中，由用户操作或程序自动触发，切换和加载不同的路由（Route）或页面（Page）的过程。在单页应用（Single-Page Application, SPA）中，路由导航通常是通过浏览器的URL地址实现的。通过在URL中指定不同的路径和参数，可以导航到不同的路由或页面，以提供个性化和动态化的用户体验。在前端框架中，常见的路由导航实现包括：1. 静态路由导航：直接通过路由的链接或点击事件进行导航。
访问极路由接口，返回JSON路由器数据
zhc10110011的专栏
12-06 1159
刚买了一个极路由，比起以前用的普通路由器，这种智能路由器功能十分新奇，通过访问“hiwifi.com”，不像以前那样访问“192.168.0.1”那样。 登录路由器会得到一个临时id，好像是通过这个ID和cookies进行操作，这是一个例子“bstok=a31cd0147edb665e024fdba3e0354f12”，可以在页面中找到。 下面是直接访问路由器的接口（返回JSON）： 返
后台返回json数据给前台和前台解析json数据（总结）
热门推荐
空空说技术的博客
11-05 7万+
后台返回json数据和前台解析json数据 一般来说web开发中，前台采用json数据提交给后台，后台处理数据以后返回json数据给前台，前台解析json，显示数据。 总而言之，前后台直接交换的数据格式最常用的非json数据无疑了。 这里就总结一些json数据的前后台处理方式。 1.JSON数据 JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值