1.在src創(chuàng)建一個router文件荣赶，在router.js文件
2.下載react-router-dom：
npm install react-router-dom --save-dev
3.router.js
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
import React from 'react';
import Tab1 from '../views/tab/tab1.js'
import Tab2 from '../views/tab/tab2.js'
import Tab3 from '../views/tab/tab3/tab3.js'
export default class Router1Map extends React.Component{
render(){
return (
<Router>
<div>
<Route exact path="/" component={Tab1}></Route>
<Route path="/tab1" component={Tab1} />//這里包括下面都不要配置exact，否則二級路由頁面不顯示不報(bào)錯
<Route path="/tab2" component={Tab2} />
<Route path="/tab3" component={Tab3} />
</div>
</Router>
)
}
}
在App.js
import React from 'react';
import RouteMap from "./routers/1router.js"
function App() {
return (
<div className="App">
<RouteMap />
</div>
);
}
export default App;
二級路由
在tab3.js文件配置二級路由
import React from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
import Tab4 from "./tab4/tab4.js"
export default class Tab3 extends React.Component {
componentDidMount(){
console.log(this.props.match)
}
render(){
return (
<div>
<div className="left">
<Link to={`${this.props.match.path}/tab4`}>路由4</Link>
</div>
<div className="right">
<Route path={`${this.props.match.path}/tab4`} component={Tab4}></Route>
</div>
</div>
)
}
}
