react二级路由自己摸索

react二级路由
react二级路由，我使用的是react项目模版组件化的二级路由，所用的路由模式是哈希模式，因为写二级路由的话使用 BrowserRouter路由配置二级路由，会出现bug，需要进行重定向特别麻烦所以用哈希简单，效率高
一下是一级路由
这是一级路由的出口文件源码

import React, { Component } from 'react';

import {

    HashRouter as Router,
    Link,
    Route

} from 'react-router-dom'

import {Tab1} from './components/index/home/Tab1'
import {Tab2} from './components/index/type/Tab2'
import {Tab3} from './components/index/gwc/Tab3'
import {Tab4} from './components/index/mymin/Tab4'

class App extends Component {
  render() {
    return (

        <Router>
          <div className="router">
            <Route path='/' exact component={Tab1}></Route>
            <Route path='/tab1' component={Tab1}></Route>
            <Route path='/tab2' component={Tab2}></Route>
            <Route path='/tab3' component={Tab3}></Route>
            <Route path='/tab4' component={Tab4}></Route>
          </div>
      </Router>
    );
  }
}

export default App;

入口文件源码

import React, { Component } from 'react';

import {Link}from 'react-router-dom'

export class Tabs extends Component {
  render() {
    return (
      <div className="Tabs">
        <Link to='/tab1'>tab1</Link>
        <Link to='/tab2'>tab2</Link>
        <Link to='/tab3'>tab3</Link>
        <Link to='/tab4'>tab4</Link>
      </div>
    );
  }
}

这是二级路由入口

import React, { Component } from 'react';

import {Link}from 'react-router-dom'

export class Left extends Component {
  render() {
    return (
      <div className="left">
        <Link to='/tab2/one'>one</Link>
        <Link to='/tab2/two'>two</Link>
        <Link to='/tab2/three'>three</Link>
        <Link to='/tab2/four'>four</Link>
      </div>
    );
  }
}

二级路由的出口

import React, {Component} from 'react';
import { HashRouter as Router,Route} from'react-router-dom'
import {One} from "./One";
import {Two} from "./Two";
import {Three} from "./Three";
import {Four} from "./Four";
export class Right extends Component {
    render() {
        return (
            <Router>
            <div className="right">
                <Route path="/" exact component={One}/>
                <Route path="/tab2" exact component={One}/>
                <Route path="/tab2/one"  component={One}/>
                <Route path="/tab2/two"  component={Two}/>
                <Route path="/tab2/three"  component={Three}/>
                <Route path="/tab2/four"  component={Four}/>
            </div>
            </Router>
        );
    }
}

以上为react的二级路由