正常路由
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>
)
}
}