import Login from '../component/login/index'
import Index from '../component/index/index'
import Props from '../component/props/index'
import Events from '../component/event/index'
export const routes = [
{
path: '/home',
component: Login
},
{
path: '/index',
component: Index,
children: [
{
path: '/index/events',
component: Events
},
{
path: '/index/props',
component: Props
}
]
}
]
index文件是主要展示内容的 用了element ui
import React from 'react';
import { Menu } from 'element-react';
import './index.scss'
// import { CSSTransition } from 'react-transition-group'
import 'element-theme-default';
export default class Index extends React.Component {
render() {
let { routes } = this.props; //取到传进来的路由表
console.log(routes)
return (
<div className="p-index-page">
<div className="p-left__menu">
<Menu defaultActive="2" className="el-menu-vertical-demo">
<Menu.SubMenu index="1" title={<span><i className="el-icon-message"></i>导航一</span>}>
<Menu.ItemGroup title="分组一">
<Menu.Item index="1-1">选项1</Menu.Item>
<Menu.Item index="1-2">选项2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="分组2">
<Menu.Item index="1-3">选项3</Menu.Item>
</Menu.ItemGroup>
</Menu.SubMenu>
<Menu.Item index="2"><i className="el-icon-menu"></i>导航二</Menu.Item>
<Menu.Item index="3"><i className="el-icon-setting"></i>导航三</Menu.Item>
</Menu>
</div>
<div className="p-right__content">
<div className="p-nav-bar"></div>
<div className="p-main__content">{this.props.children}</div>
</div>
</div>
)
}
}
最终调用的路由
import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import { routes } from './routerList'; //路由表
class RouterView extends Component {
render() {
// let { routes } = this.props; //取到传进来的路由表
console.log(routes)
let rdArr = routes.filter(item => item.redirect); //把所以路由重定向取出来
// let rdCom = rdArr.map((item, key) => <Redirect from={item.path} to={item.redirect} key={key} />);
return (
<Router>
<Switch>
{
routes.map((item, index) => {
if (item.children && item.children.length > 0) {
return (
<Route path={item.path} key={index} render={() => (
<item.component> {
item.children.map((children, childrenKey) => {
return (
<Route path={children.path} key={children.path} component={children.component}></Route>
)
})
}
</item.component>
)} ></Route>
)
} else {
return (
<Route path={item.path} key={index} component={item.component}></Route>
)
}
})
}
</Switch>
</Router>
);
}
}
export default RouterView;
最终效果渲染出来类似这样的嵌套