react-router-dom示例8——Sidebar

/**
 * 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;