react固定菜单栏 根据点击菜单栏的选项跳转不同的子界面(路由跳转直接跳新界面,固定不住菜单栏。还有 You should not use <Link> outside a <Router>)

来源:csdn博客 分类: 文章浏览史 发布时间:2021-09-04 17:19:45 最后更新:2021-09-04 浏览:516
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2021-09-04 17:19:45

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

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

1楼 e
2022-03-20 13:54:19
e
php技术微信