react固定菜单栏 根据点击菜单栏的选项跳转不同的子界面（路由跳转直接跳新界面，固定不住菜单栏。还有 You should not use ＜Link＞ outside a ＜Router＞）

这只能用路由跳，不想用路由还有一个办法，那就是把菜单栏复制到各个界面，这样不管到哪个界面都有菜单栏。。。哈哈哈开个玩笑，进入正题

这个文章主要针对路由跳转直接跳新界面，固定不住菜单栏，还有这个Error: Invariant failed: You should not use outside a 报错（只是看 You should not use outside a 解决办法的直接看   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 outside a 这个错误，直接把开局引入的项目主界面放到路由里就行

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 (
            

                
                        {/* 只匹配其中一个 */}
                        
                        
                        
                        
                    
                
            
        )
    }
}

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 (
            
                

                
                    
                    
                        
                            
                            
                        
                    
                
                

                    

                        软件名称 ©2021 Created by 201831008017
                    
                
            
        )
    }
}

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 (
      

        }>
          
          用户信息展示
          
        
        }>
          
            管理审核人员
          
        
        }>
          直观统计分析
        
        } title="待命名">
           1
           2
          3
          4
        

      
    );
  }
}

好啦，这样就可以实现多级菜单栏切换路由了～

还有一句话想说：就是我的开局自带的index.js调用的app.js，而app.js又调用了router.js。所以其实可以直接在app.js里写router.js的东西，要不然调来调去太绕了。