React 路由

针对React路由的简单处理

对于已经习惯了用vue来写项目的我来说，重新玩起react那坑真是无处不在~！！
话不多说，今天主要和大家分享下关于react 使用ant design 在Layout布局下的路由处理

一、在App.js中引入主页和登录页

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Login from './pages/Login';
import Main from './pages/Main';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
            <Route exact path='/' component={Login} />
            <Route path='/main' component={Main} />//Main页面作为主页加载Layout
        </Switch>
    </div>
    </Router>
  );
}

export default App;

这里只做简单的demo 大家可以按需求在App.js中引入类似404的页面

二、在src目录下创建router文件夹，router下创建index.js

代码如下：

import Pagehome from '../pages/Pagehome';
import Cashwithdrawal from '../pages/Cashwithdrawal';
import BranchInformation from '../pages/BranchInformation';
import CarBuying from '../pages/CarBuying';
import IdentityConfiguration from '../pages/IdentityConfiguration';
import Incomestatement from '../pages/Incomestatement';
import PartnershipWarrant from '../pages/PartnershipWarrant';
import ProductDisplay from '../pages/ProductDisplay';
import RechargeRecord from '../pages/RechargeRecord';

const Routers = [
    {path:'/main/index',name:"首页",component: Pagehome},
    {path:'/main/cash',name:"提现到余额表",component: Cashwithdrawal},
    {path:'/main/branchInformation',name:"分公司信息表",component: BranchInformation},
    {path:'/main/car',name:"购车人表",component: CarBuying},
    {path:'/main/id',name:'购车身份配置表',component: IdentityConfiguration},
    {path:'/main/income',name:'收益表',component: Incomestatement},
    {path:'/main/warrant',name:'合伙人权证表',component: PartnershipWarrant},
    {path:'/main/product',name:'产品展示表',component: ProductDisplay},
    {path:'/main/recharge',name:'充值记录表',component: RechargeRecord},
];
export default Routers;

这里是本地模拟的路由数据，只展示了一级路由，如果有多级路由，正常加上就行

三、在主页Main中引入router

import Routers from '../router/index';

接着处理下menu

递归调用，多级导航
    renderNav(){
        return this.renderMenuItem(this.state.menuItems)	//这里的menu参数是从后台传过来的
    }
    //根据导航数据，递归遍历生成多级导航
    renderMenuItem(arr){
        return arr.map((item)=>{
            if(item.childs){
                return (
                    <SubMenu key={item.parent.id} title={item.parent.name}>
                        {this.renderMenuItem(item.childs)}
                    </SubMenu>
                )
            }else{
                return  <Menu.Item key={item.parent.path}>
                            <Link to={item.parent.path}>{item.parent.name}</Link>
                        </Menu.Item>
            }
        })
    }
    后台参数结构示例：
    {"parent":{"id":1,"name":"xx","pid":0,"path":"/main/index","action":"","level":"1"}},
    如果有二级路由则有相对应的字段表示

加载menu菜单的函数调用如下：

UNSAFE_componentWillMount = ()=>{
        this.menuData();
    }

在render中添加：

<Menu theme="dark" defaultSelectedKeys={['/main/index']} onClick={this.choice} mode="inline">
 {this.renderNav()}
</Menu>

到这里左侧的菜单栏基本就完成了，下面我们来处理下路由跳转

四、为了避免写巨多的Route

在Layout的content标签下用map的形式替换Route

<Content style={{ margin: '0 16px' }}>
	Routers.map((item)=>{
   		return <Route key={item.path} path={item.path} component={item.component}/>
                })  
</Content>

Routers是之前创建的路由文件，这样就可以根据后台返回的书剑进行渲染菜单页了，点击不同的路由跳转到不同的组件。