这只能用路由跳,不想用路由还有一个办法,那就是把菜单栏复制到各个界面,这样不管到哪个界面都有菜单栏。。。哈哈哈开个玩笑,进入正题
这个文章主要针对路由跳转直接跳新界面,固定不住菜单栏,还有这个Error: Invariant failed: You should not use <Link> outside a <Router>报错(只是看 You should not use <Link> outside a <Router>解决办法的直接看 1.总路由router.js)
这几天真的被路由给搞吐了,认认真真的改了一天 多,今天来到公司之后,我又重新梳理了一下,可能就是昨天脑子确实转不动了,今天就顺着就给搞出来了,那激动的心,颤抖的手,赶紧过来记录一下。主要是怕我以后再忘了。。这次真的进入正题
语言:react+ant design 编译器:VS code 环境:macOS Big Sur
这次主要涉及三个界面,看结构
subject.js是菜单栏(菜单栏的子界面是index.js上边那两个绿的,page里面的one和two)
index.js是主界面,调用菜单栏组件
router.js是路由界面
界面图看下(请忽略我的配色和样式,后期会调的,相信我)
1.总路由router.js(所有的界面跳转都得在这申请,但是我们菜单栏内的跳转界面是二级路由就是子路由,所以子路由就不要在这里写了,但我这里写了,放心写了也没用不从这里跳)
ps:如果报You should not use <Link> outside a <Router>这个错误,直接把开局引入的项目主界面<Index></Index>放到路由里就行
import React, { Component } from 'react';
import { HashRouter, Route, Switch, BrowserRouter as Router } from 'react-router-dom';
import Index from './entrance/main/index';
import One from './entrance/main/page/one/one';
import Two from './entrance/main/page/two/two';
export default class RouterWrap extends Component {
render() {
return (
<div id="router">
<HashRouter>
<Switch> {/* 只匹配其中一个 */}
<Route path="/" component={Index} exact />
<Index></Index>
<Route path="/page/one" component={One} />
<Route path="/page/two" component={Two} />
</Switch>
</HashRouter>
</div>
)
}
}
2.index.js是我自己在别的文件夹新建的,不是开局自带的,让他作为主界面,在这里写跳转的Route,引入要跳转的界面,Route外边一定要包上Switch,要不然不管用,亲测
import React, { Component } from 'react';
import Subject from '../common-components/subject'
import Head from '../common-components/head'
import './main.less'
import One from './page/one/one'
import Two from './page/two/two'
import { Layout } from 'antd';
import { Link, HashRouter, BrowserRouter ,Route ,Switch} from 'react-router-dom'
const { Header, Footer, Sider, Content } = Layout;
class Index extends React.Component {
render() {
return (
<Layout>
<Header style={{ backgroundColor: '#1890FF'}}><Head></Head></Header>
<Layout>
<Sider style={{ backgroundColor: '#030E17', height: '800px' }}><Subject></Subject></Sider>
<Content>
<Switch>
<Route path='/page/one' component={One}></Route>
<Route path='/page/two' component={Two}></Route>
</Switch>
</Content>
</Layout>
<Footer style={{ backgroundColor: '#001E37', height: '100px' }}>
<div style={{ position: 'absolute', textAlign: 'center', width: '100%', lineHeight: '50px' }}>
<span style={{ color: '#FFFFFF' }}>软件名称 ©2021 Created by 201831008017</span>
</div>
</Footer>
</Layout>
)
}
}
export default Index;
3.这个subject.js就是所有的菜单栏组件了,引入Link,跳转路径一定写对(路径不会可以去搜)
import { Menu, Button } from 'antd'
import React from 'react'
import { Link } from 'react-router-dom'
import {
PieChartOutlined,
DesktopOutlined,
ContainerOutlined,
MailOutlined,
} from '@ant-design/icons';
import { Route } from 'react-router-dom';
const { SubMenu } = Menu;
export default class Subject extends React.Component {
state = {
current: ''
}
handleClick = (e) =>{
this.setState({current:e.key})
}
render() {
return (
<Menu
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
style={{ paddingLeft: '5px' }}
selectedKeys={[this.state.current]}
onClick={this.handleClick}
>
<Menu.Item key="one" icon={<DesktopOutlined />}>
<Link to='/page/one'>
用户信息展示
</Link>
</Menu.Item>
<Menu.Item key="2" icon={<ContainerOutlined />}>
<Link to='/page/two'>
管理审核人员
</Link>
</Menu.Item>
<Menu.Item key="3" icon={<PieChartOutlined />}>
直观统计分析
</Menu.Item>
<SubMenu key="sub1" icon={<MailOutlined />} title="待命名">
<Menu.Item key="5"> 1</Menu.Item>
<Menu.Item key="6"> 2</Menu.Item>
<Menu.Item key="7">3</Menu.Item>
<Menu.Item key="8">4</Menu.Item>
</SubMenu>
</Menu>
);
}
}
好啦,这样就可以实现多级菜单栏切换路由了~
还有一句话想说:就是我的开局自带的index.js调用的app.js,而app.js又调用了router.js。所以其实可以直接在app.js里写router.js的东西,要不然调来调去太绕了。