react 个人总结出来router 比较好用封装 用法类似Vue 路由嵌套

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;

最终效果渲染出来类似这样的嵌套