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

最新推荐文章于 2024-05-13 23:42:06 发布

方心

最新推荐文章于 2024-05-13 23:42:06 发布

阅读量3.8k

点赞数 3

分类专栏：前端文章标签： react.js vscode

本文链接：https://blog.csdn.net/qq_53768302/article/details/120077525

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

这个文章主要针对路由跳转直接跳新界面，固定不住菜单栏，还有这个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的东西，要不然调来调去太绕了。

方心

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
3
评论
react固定菜单栏根据点击菜单栏的选项跳转不同的子界面（路由跳转直接跳新界面，固定不住菜单栏。还有 You should not use ＜Link＞ outside a ＜Router＞）

这只能用路由跳，不想用路由还有一个办法，那就是把菜单栏复制到各个界面，这样不管到哪个界面都有菜单栏。。。哈哈哈开个玩笑，进入正题这几天真的被路由给搞吐了，认认真真的改了一天多，今天来到公司之后，我又重新梳理了一下，可能就是昨天脑子确实转不动了，今天就顺着就给搞出来了，那激动的心，颤抖的手，赶紧过来记录一下。主要是怕我以后再忘了。。这次真的进入正题语言：react+ant design 编译器：VS code 环境：macOS Big Sur这次主要涉及三个界面，看结...
复制链接

扫一扫