react项目笔记4----点击右边菜单栏显示右边的内容

在view下创建目录结构


 1. 创建home ---index.jsx  主页
 2. 创建user---index.jsx 用户列表  Permission.jsx 管理员列表
 3. 创建pro---index.jsx  产品列表
 4. 创建cart---index.jsx  购物车列表
 5. 创建order---index.jsx  订单列表
 
 {/* 在default 文件中添加路由组件 */}
import { Switch, Route, Redirect } from 'react-router-dom'
import Home from './../views/home/Index'
import Pro from './../views/pro/Index'
import User from './../views/user/Index'
import Permission from './../views/user/Permission'
import Cart from './../views/cart/Index'
import Order from './../views/order/Index'
            <Switch>
              <Route path="/home" component = { Home } />
              <Route path="/users/list" component = { User } />
              <Route path="/pro/list" component = { Pro } />
              <Route path="/users/permission" component = { Permission } /> 
              <Route path="/cart/list" component = { Cart } />
              <Route path="/order/list" component = { Order } />
              <Redirect to="/home" exact path="/" />
            </Switch>

在SliderMenu.jsx中添加点击事件

	###编程式导航
	onClick={(obj)=>{
      		this.props.history.push(obj.key)
      	}
   ###但是不起作用还需要与路由联系起来
  import {withRouter} from 'react-router-dom'
  export default withRouter(SliderMenu); 

版权声明:本文为weixin_38522914原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。