你需要跳转的路由按照代码写就可以实现简单的跳转
(我用的是 布局 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);