react二级路由的两种方法

** react 二级路由配置 **
1.使用react - router - config包
①创建一个config.js文件默认导出路由数组

import Home from '../views/home'
import Car from '../views/car'
import Home1 from '../views/home1'
import Home2 from '../views/home2'
let routers = [
{
  path: '/home',
  component: Home,
  children: [
    {
      path: '/home/tab1',
      component: Home1
    }, {
      path: '/home/tab2',
      component: Home2
    },
  ]
}, {
  path: '/car',
  component: Car,
  baohu: true
},
]
export default routers

②App.js使用react - router - config下的renderRoutes传入config数组渲染路由元素

import React, { Component } from 'react'
import config from './router/config'
import { BrowserRouter } from 'react-router-dom'
import { renderRoutes } from 'react-router-config'
export default class App extends Component {
render() {
  return (
    <div>
      <BrowserRouter>
        app
        {renderRoutes(config)}
      </BrowserRouter>
    </div>
  )
}
}

③一级路由下渲染二级路由元素

import React, { Component } from 'react'
import { renderRoutes } from 'react-router-config'
export default class home extends Component {
render() {
  return (
    <div>
      home
      {
        renderRoutes(this.props.route.children)
      }
    </div>
  )
}
}

2.使用渲染组件router.js
①使用公共组件渲染路由元素
公共组件使用 props参数渲染

import React, { Component } from 'react'
import { Switch, Route } from 'react-router-dom'
export default class router extends Component {
render() {
  return (
    <Switch>
      {
        this.props.config.map((item, index) => {
          return <Route key={index} path={item.path} render={() => {
            return <item.component config={item.children}></item.component>
          }}></Route>
        })
      }
    </Switch>
  )
}
}

②App.js

import React, { Component } from 'react'
import config from './router/config'
import { BrowserRouter } from 'react-router-dom'
import Routerview from './router/router'
export default class App extends Component {
render() {
  return (
    <div>
      <BrowserRouter>
        app
        <Routerview config={config}></Routerview>
      </BrowserRouter>
    </div>
  )
}
}

③一级路由下

import React, { Component } from 'react'
import Routerview from '../router/router'
export default class home extends Component {
render() {
  return (
    <div>
      home
    <Routerview config={this.props.config}></Routerview>
    </div>
  )
}
}