React后台管理系统-布局layout设计

首页layout设计，   <NavTop />组件是顶部，<NavSide /是侧边栏

1. import React from 'react';
2.  
3. import NavTop from 'component/nav-top/index.jsx';
4. import NavSide from 'component/nav-side/index.jsx';
5.  
6. import './theme.css';
7. import './index.scss';
8. class Layout extends React.Component{
9.     constructor(props){
10.         super(props);
11.     }
12.     render(){
13.         return(
14.           <div id="wrapper">
15.               <NavTop />
16.               <NavSide />
17.               {this.props.children}
18.           </div>
19.         )
20.     }
21. }
22.  
23. export default Layout;

this.props.children的数据来自组件子节点的数据,默认是访问的Home组件里边的数据,显示Home页

1. import React from 'react';
2. import ReactDOM from 'react-dom';
3. import { BrowserRouter as Router, Switch, Redirect, Route, Link显示home } from 'react-router-dom';
4. // 页面
5. import Home from 'page/home/index.jsx';
6. import Login from 'page/login/index.jsx';
7. import ProductRouter from 'page/product/router.jsx';
8. import Layout from 'component/layout/index.jsx';
9. import OrderList from 'page/order/index.jsx';
10. import OrderDetail from 'page/order/detail.jsx';
11. import UserList from 'page/user/index.jsx';
12. class App extends React.Component{
13.     render(){
14.         let LayoutRouter = (
15.             <Layout>
16.                 <Switch>
17.                     <Route exact path="/" component={Home}/>
18.                     <Route path="/product" component={ProductRouter}/>
19.                     <Route path="/product-category" component={ProductRouter}/>
20.                     <Route path="/order/index" component={OrderList}/>
21.                     <Route path="/order/detail/:orderNumber" component={OrderDetail}/>
22.                     <Route path="/user/index" component={UserList}/>
23.                     <Redirect exact from="/order" to="/order/index"/>
24.                     <Redirect exact from="/user" to="/user/index"/>
25.                 </Switch>
26.             </Layout>
27.         );
28.         return (
29.             <Router>
30.                 <Switch>
31.                     <Route path="/login" component={Login}/>
32.                     <Route path="/" render={ props => LayoutRouter}/>
33.                 </Switch>
34.             </Router>
35.         )
36.     }
37. }
38.  
39.  
40. ReactDOM.render(
41.     <App />,
42.     document.getElementById('app')
43. );