react 左侧点击 右侧跳转

你需要跳转的路由按照代码写就可以实现简单的跳转

（我用的是 布局 Layout - Ant Design）

布局 Layout - Ant Design链接

import { Button, Layout, Breadcrumb, Dropdown, Menu, span, Modal, message } from 'antd';
import { connect, injectIntl, FormattedMessage, history } from 'umi';
import React, { Component, useState } from 'react';
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import site from './index.less'

//引入的路由
import Welcome from '../Welcome'
import ShowACalendar from '../TheaterManage/ShowACalendar'
import TheCalendar from '../TheaterManage/TheCalendar'
import MovieSeat from '../TheaterManage/MovieSeat'
import PlayList from '../TheaterManage/PlayList'
import RangeManage from '../TheaterManage/RangeManage'
import TicketOrderInfo from '../TheaterManage/TicketOrderInfo'
import FilmSubmissionDetails from '../TheaterManage/FilmSubmissionDetails'
import StockList from '../StockManage/StockList'
import OrdersForGoods from '../StockManage/OrdersForGoods'
import GoodsDetails from '../StockManage/GoodsDetails'

import { Redirect, Route, Switch } from 'react-router-dom'
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

@connect(({ activiteList }) => ({ activiteList }))
class ActiviteList extends Component {
  constructor(props) {
    super(props)
    console.log(props.match);
    this.state = {
      search: false,
      LeftmenuBar: []
    };
  }
  componentWillMount() {
    this.add()
  }
  componentWillUnmount() {
    //清除所有网络
    this.setState = () => {
      return
    }
  }
  onCollapse = collapsed => {
    this.setState({ collapsed });
  };
  add() {
    let that = this
    this.props.dispatch({
      type: 'activiteList/get',
      callback: ({ response }) => {
        let state = that.state
        let Leftmenu = []
        response.data.routes.map((item) => {
          return Leftmenu = item.routes
        })
        that.setState({ ...state, LeftmenuBar: Leftmenu })
      }
    });
  }
  HopRouting(ite) {
    if (ite.path) {
      history.push(ite.path)
    } else {
    }

  }
  render() {
    const { collapsed } = this.state;
    return [
      (
        <Layout style={{ minHeight: '100vh' }}>
          <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
            <div className={site.logo} />
            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
              {this.state.LeftmenuBar.map((item) => {
                return <SubMenu key={item.number} icon={<UserOutlined />} title= 
                 {item.name}>
                  {item.routes.map((ite) => {
                    return <Menu.Item key={ite.number} onClick= 
                    {this.HopRouting.bind(this, ite)}>{ite.name}</Menu.Item>
                  })}
                </SubMenu>
              })}
            </Menu>
          </Sider>
          <Layout className="site-layout">
            <Header className="site-layout-background" style={{ padding: 0 }} />
            <Content style={{ margin: '0 16px' }}>
              {/* {<Route path='/' />?
            <Welcome/>
            : */}
              <Switch>
                跳转的路由页
                <Route path='/Welcome' component={Welcome} />
                <Route path='/TheaterManage/ShowACalendar' component= 
                {ShowACalendar} />
                <Route path='/TheaterManage/TheCalendar' component={TheCalendar} 
                />
                <Route path='/TheaterManage/MovieSeat' component={MovieSeat} />
                <Route path='/TheaterManage/PlayList' component={PlayList} />
                <Route path='/TheaterManage/RangeManage' component={RangeManage} 
                />
                <Route path='/TheaterManage/FilmSubmissionDetails' component= 
                {FilmSubmissionDetails} />
                <Route path='/StockManage/StockList' component={StockList} />
                <Route path='/TheaterManage/TicketOrderInfo' component= 
                {TicketOrderInfo} />
                <Route path='/StockManage/OrdersForGoods' component= 
                {OrdersForGoods} />
                <Route path='/StockManage/GoodsDetails' component={GoodsDetails} 
                />
            //如果你没有引入路由就跳转。就会进入这个页面。因为你没有路由所以只能跳到这个页面
            //也可以理解为默认页面
                <Redirect to='/Welcome' />
              </Switch>
              {/* }  */}
            </Content>
            <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by 
            Ant UED</Footer>
          </Layout>
        </Layout>
      )
    ]
  }
}
export default injectIntl(ActiviteList);