React多级路由

正常路由

app.js页面

import React, { Component } from 'react';

import '../styles/App.css';
import '../styles/reset.css';
import '../styles/rem.js';
import {Routers} from '../router/router.js'

class App extends React.Component {
  render() {
    return (
        

            
        
    );
  }
}


export default App;

router.js页面

import React, { Component } from 'react';

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

import {Tab1} from '../components/tab/tab1'
import {Tab2} from '../components/tab/tab2'
import {Tab3} from '../components/tab/tab3'


export class Routers extends React.Component {
  render() {
    return (
             
					    

					      
					      
					      
					      
					    
					  
    );
  }
}

tab1.js里的二级路由

import React, { Component } from 'react';
import {Nav} from './nav'

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

import {Tab4} from './tab4'
import {Tab5} from './tab5'
import {Tab6} from './tab6'
import {Tab7} from './tab7'

export class Tab1 extends React.Component{
	render(){
		return(
			

			

			        
 
			                  路由4
			                  路由5
			                  路由6
			                  路由7
			         
   
			         

			                  
					          
					          
					          
					 
			
			

			
		)
	}
}

tab4.js里的三级路由

import React, { Component } from 'react';

import {Tab8} from './tab8'
import {Tab9} from './tab9'
import {Tab10} from './tab10'

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

export class Tab4 extends React.Component{
	componentDidMount(){
		console.log(this.props.match.path)
	}
	render(){
		return(
			

			

			                  路由8
			                  路由9
			                  路由10
			         
   
			         

			                  
					          
					          
					 
			
		)
	}
}