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的二级路由