# react-dynamic-routes

**Repository Path**: syriansoldier/react-dynamic-routes

## Basic Information

- **Project Name**: react-dynamic-routes
- **Description**: react动态路由方案
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 0
- **Created**: 2022-02-13
- **Last Updated**: 2024-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## react动态路由解决方案
```js
一: 项目启动: 
    1: yarn 
    2: yarn json-server   开启服务(我路由自己写在本地了)
    3: yarn start

二: 核心思路介绍: 后端返回路由配置表(表的格式由前端决定),不同的权限返回不同的路由表
前端监视当前pathname, 到路由表里查找出当前路由对象, 如果找的到渲染Route, 找不到渲染404页面


三: 推荐浏览顺序(有些文件没有用, 不要看, 我没删干净): 
 1: 后端我用的json-server模拟的路由数据, 先看看__json_server__/db.json文件我定义的数据
 2: 依次观看 
        layout组件,在src/pages/layouts
        layout里动态渲染菜单Menu(自己封装的), Menu组件在src/component/Menu
        layout里动态渲染路由, 动态路由组件在src/component/DynimicRoutes
        layout里的面包屑自己封装的, 在src.component/BreadCrump
        redux的user模块

四: 逻辑整理:
    1: 常量路由正常在app.tsx里配置, 动态路由在layout里配置
    2: layout组件一挂载, 在redux发请求获得后端返回的routes
    3: 将routes分别注入Menu(我自己封装的Menu,不是antd的) 和DynamicRoutes动态组件实现动态菜单和动态路由
    4: AuthRoute负责阻止在未登录时非法访问权限页面, 登录后阻止返回login, 登录后被重定向到404的正常显示 

五: 备注: 菜单的图标我没写, 思路就是前端定义好字符串, 建立一张图标映射表,