/**
* Created by mapbar_front on 2019/7/20.
*/
import React,{Component} from 'react';
import {
BrowserRouter as Router,
Route,
Link,
} from 'react-router-dom';
import Home from './../Home/Home';
import About from './../About/About';
import Topic from './../../components/Topic/Topic';
const Routes = [
{
path:'/',
exact: true,
sidebar: ()=><div>home</div>,
main:()=><Home/>
},
{
path:'/about',
sidebar: ()=><div>about</div>,
main:()=><About/>
},{
path:'/topic',
sidebar: ()=><div>topic</div>,
main: ()=><Topic/>
}
]
class SlideBar extends Component{
render(){
return(
<Router>
<div style={{ display:'flex'}}>
<div style={{width:100}}>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topic">Topic</Link></li>
</ul>
<div>
{
Routes.map((route,index)=>
<Route
key={index}
exact={route.exact}
path={route.path}
component={route.sidebar}
/>
)
}
</div>
</div>
<div style={{flex:1}}>
{
Routes.map((route,index)=>
<Route
key={index}
exact={route.exact}
path={route.path}
component={route.main}
/>
)
}
</div>
</div>
</Router>
)
}
}
export default SlideBar;
react-router-dom示例8——Sidebar
最新推荐文章于 2024-06-25 17:15:05 发布