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 (
        <div className="app">
            <Routers></Routers>
        </div>
    );
  }
}


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 (
             <Router>
					    <div className="router">
					      <Route exact path="/" component={Tab1}></Route>
					      <Route path="/tab1" component={Tab1}></Route>
					      <Route path="/tab2" component={Tab2}></Route>
					      <Route path="/tab3" component={Tab3}></Route>
					    </div>
					  </Router>
    );
  }
}

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(
			<div className="tab">
			<div className="top">
			        <div className="left"> 
			                  <Link to={`${this.props.match.path}/tab4`}>路由4</Link>
			                  <Link to={`${this.props.match.path}/tab5`}>路由5</Link>
			                  <Link to={`${this.props.match.path}/tab6`}>路由6</Link>
			                  <Link to={`${this.props.match.path}/tab7`}>路由7</Link>
			         </div>   
			         <div className="right">
			                  <Route path={`${this.props.match.path}/tab4`} component={Tab4}></Route>
					          <Route path={`${this.props.match.path}/tab5`} component={Tab5}></Route>
					          <Route path={`${this.props.match.path}/tab6`} component={Tab6}></Route>
					          <Route path={`${this.props.match.path}/tab7`} component={Tab7}></Route>
					 </div>
			</div>
			<Nav></Nav>
			</div>
		)
	}
}

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(
			<div className="tab4">
			<div className="t4top">
			                  <Link to={`${this.props.match.path}/tab8`}>路由8</Link>
			                  <Link to={`${this.props.match.path}/tab9`}>路由9</Link>
			                  <Link to={`${this.props.match.path}/tab10`}>路由10</Link>
			         </div>   
			         <div className="t4bottom">
			                  <Route path={`${this.props.match.path}/tab8`} component={Tab8}></Route>
					          <Route path={`${this.props.match.path}/tab9`} component={Tab9}></Route>
					          <Route path={`${this.props.match.path}/tab10`} component={Tab10}></Route>
					 </div>
			</div>
		)
	}
}