酷站(www.ku0.com)-致力于为互联网从业者提供专业的网络资源

热门关键词:  企业  as  baidu  c4rp3nt3r  美女

React配置子路由的实现

来源:转载 作者:秩名 人气: 发布时间:2021-06-04
本篇文章主要介绍了React配置子路由的实现,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。
1、组件First.js下有子组件:

import Admin from './Admin'
import FormCom from './FormCom'
import One from './One'
import ButtonCom from './ButtonCom'
import MenuCom from './MenuCom'
import StepsCom from './StepsCom'
import TabsCom from './TabsCom'
import TableCom from './TableCom'
import MessageCom from './MessageCom'
import NotificationCom from './NotificationCom'
import ProgressCom from './ProgressCom'
import SpinCom from './SpinCom'
import BadgeCom from './BadgeCom'
 

First.js完整代码如下:

import React from 'react'
import { Layout, Menu } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import { HashRouter, Route, Link } from 'react-router-dom'
import Admin from './Admin'
import FormCom from './FormCom'
import One from './One'
import ButtonCom from './ButtonCom'
import MenuCom from './MenuCom'
import StepsCom from './StepsCom'
import TabsCom from './TabsCom'
import TableCom from './TableCom'
import MessageCom from './MessageCom'
import NotificationCom from './NotificationCom'
import ProgressCom from './ProgressCom'
import SpinCom from './SpinCom'
import BadgeCom from './BadgeCom'
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

export default class First extends React.Component {
    constructor() {
        super();
    }

    //只展开当前父级菜单 begin
    rootSubmenuKeys = ['sub1', 'sub2', 'sub3'];

    state = {
        openKeys: ['sub1'],
    };

    onOpenChange = openKeys => {
        const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            this.setState({ openKeys });
        } else {
            this.setState({
                openKeys: latestOpenKey ? [latestOpenKey] : [],
            });
        }
    };
    //只展开当前父级菜单 end

    render() {
        return (<div>
            <Layout>
                <HashRouter>
                    <Header className="header" style={{ position: 'fixed', zIndex: 1, width: '100%', paddingLeft: '20px'}}>
                        <div className="logo" style={{fontSize: '32px', color: '#ffffff', fontWeight: 'bold'}}>React App</div>
                        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
                            {/*<Menu.Item key="1">nav 1</Menu.Item>
                            <Menu.Item key="2">nav 2</Menu.Item>
                            <Menu.Item key="3">nav 3</Menu.Item>*/}
                        </Menu>
                    </Header>
                    <Layout>
                        <Sider width={200} className="site-layout-background" style={{
                            overflow: 'auto',
                            height: '100vh',
                            position: 'fixed',
                            left: 0,
                        }}>
                            <Menu
                                theme="dark"
                                mode="inline"
                                defaultSelectedKeys={['2']}
                                defaultOpenKeys={['sub1']}
                                style={{ height: '100%', paddingTop: '60px', borderRight: 0 }}
                                onOpenChange={this.onOpenChange}
                                openKeys={this.state.openKeys}
                            >
                                <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
                                    <Menu.Item key="1"><Link to={`${this.props.match.path}/admin`}>admin</Link></Menu.Item>
                                    <Menu.Item key="2"><Link to={`${this.props.match.path}/form`}>form</Link></Menu.Item>
                                    <Menu.Item key="3"><Link to={`${this.props.match.path}/one`}>One</Link></Menu.Item>
                                    <Menu.Item key="4"><Link to={`${this.props.match.path}/menu`}>Menu</Link></Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
                                    <Menu.Item key="5"><Link to={`${this.props.match.path}/step`}>Step</Link></Menu.Item>
                                    <Menu.Item key="6"><Link to={`${this.props.match.path}/tabs`}>Tabs</Link></Menu.Item>
                                    <Menu.Item key="7"><Link to={`${this.props.match.path}/table`}>Table</Link></Menu.Item>
                                    <Menu.Item key="8"><Link to={`${this.props.match.path}/message`}>Message</Link></Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
                                    <Menu.Item key="9"><Link to={`${this.props.match.path}/notification`}>Notification</Link></Menu.Item>
                                    <Menu.Item key="10"><Link to={`${this.props.match.path}/progress`}>ProgressCom</Link></Menu.Item>
                                    <Menu.Item key="11"><Link to={`${this.props.match.path}/spin`}>Spin</Link></Menu.Item>
                                    <Menu.Item key="12"><Link to={`${this.props.match.path}/badge`}>Badge</Link></Menu.Item>
                                    <Menu.Item key="13"><Link to={`${this.props.match.path}/button`}>Button</Link></Menu.Item>
                                </SubMenu>
                            </Menu>
                        </Sider>
                        <Layout style={{ padding: '84px 20px 20px', marginLeft: 200}}>
                            <Content
                                className="site-layout-background"
                                style={{
                                    padding: 24,
                                    margin: 0
                                }}
                            >
                                <Route path={`${this.props.match.path}/admin`} exact component={Admin}></Route>
                                <Route path={`${this.props.match.path}/form`} component={FormCom}></Route>
                                <Route path={`${this.props.match.path}/one`} component={One}></Route>
                                <Route path={`${this.props.match.path}/menu`} component={MenuCom}></Route>
                                <Route path={`${this.props.match.path}/step`} component={StepsCom}></Route>
                                <Route path={`${this.props.match.path}/tabs`} component={TabsCom}></Route>
                                <Route path={`${this.props.match.path}/table`} component={TableCom}></Route>
                                <Route path={`${this.props.match.path}/message`} component={MessageCom}></Route>
                                <Route path={`${this.props.match.path}/notification`} component={NotificationCom}></Route>
                                <Route path={`${this.props.match.path}/progress`} component={ProgressCom}></Route>
                                <Route path={`${this.props.match.path}/spin`} component={SpinCom}></Route>
                                <Route path={`${this.props.match.path}/badge`} component={BadgeCom}></Route>
                                <Route path={`${this.props.match.path}/button`} component={ButtonCom}></Route>
                            </Content>
                        </Layout>
                    </Layout>
                </HashRouter>
            </Layout>
        </div>)
    }
}
 

其中

 
${this.props.match.path}

是关键。

2、假设还有一个登录组件Login.js,代码如下:

import React from 'react'
import { Button } from 'antd';

export default class Login extends React.Component {
    constructor() {
        super();
    }

    redirectHandle = () => {
        console.log("aaa");
        this.props.history.push("/home");
    }

    render() {
        return (<Button type="primary" onClick={()=>this.redirectHandle()}>Primary Button</Button>)
    }
}
 

假设React项目用的是React脚手架搭建,则在src目录下的App.js文件中设置路由:

render() {
  return (<HashRouter>
    <Switch>
      <Route exact={true} path="/login" component={Login} />
      <Route path="/home" component={First} />
      <Redirect to='/login' /> {/*/login和/home之外的路由直接跳转到/login*/}
    </Switch>
  </HashRouter>)
}
 

App.js完整代码如下:

import React from 'react';
import { notification } from 'antd'
import { HashRouter, Route, Switch, Redirect } from 'react-router-dom';
import First from './First';
import Login from './Login';
import './App.css';

class App extends React.Component {
  constructor() {
    super();
    this.openNotificationWithIcon = type => {
      notification[type]({
        message: 'Notification Title',
        description:
          'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      });
    }
  }

  clickHandle() {
    console.log("clicked!!!");
  }

  render() {
    return (<HashRouter>
      <Switch>
        <Route exact={true} path="/login" component={Login} /> {/**exact 防止混路由混合   如:输入127.xx.xx.xx/home 中有/login页面*/}
        <Route path="/home" component={First} />
        <Redirect to='/login' />
      </Switch>
    </HashRouter>)
  }
}

export default App;
 
项目目录结构如下:

项目预览效果如下:

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://www.cnblogs.com/samve/p/13363356.html

相关文章

  • 详解在Vue中实现添加全局store的方法

    详解在Vue中实现添加全局store的方法

    Vue添加全局store 在命令行中输入安装 1 npm install --save vuex 在main.js文件中引用 store和在new Vue中声明store 1 2 import store from ./store store, 在src中创建一个page文件 在page文件下创建......
    03-30
  • Vue之Axios的异步通信介绍

    Vue之Axios的异步通信介绍

    1.什么是Axios Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架, 她的主要作用就是实现AJAX异步通信,其功能特点如下: 从浏览器中创建XMLHttpRequests 从node.js创......
    03-29
  • AngularJS实现多级下拉框的代码

    AngularJS实现多级下拉框的代码

    具体内容如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 div ng-app=MultiDropDownApp ng-controller=MultiDropDownControl as vm label选择地址:/label !--ng-options加载所有选择项,ng-model记录当前选择项-- sel......
    03-25
  • 详解在vue2项目中封装echarts地图的优雅方法

    详解在vue2项目中封装echarts地图的优雅方法

    前言 区域地图选区域时,需要弹窗展示数据,样式是各种各样的,各种排列的数据、图文混搭、视频......这里除了封装echarts区域地图模块,还介绍了下自定义弹窗的实现......
    03-19
  • Vue的diff算法原理介绍

    Vue的diff算法原理介绍

    思维导图 0. 从常见问题引入 虚拟dom是什么? 如何创建虚拟dom? 虚拟dom如何渲染成真是dom? 虚拟dom如何patch(patch) 虚拟DOM的优势?(性能) Vue中的key到底有什么用,为什么不......
    03-17
  • Vue2.0脚手架搭建方法

    Vue2.0脚手架搭建方法

    一、安装node.js 1、进入官网https://nodejs.org/en/download/ 根据电脑操作系统,选择相应版本的文件进行下载。 2、下载文件后双击进行安装 安装完成以后进入node.js的安装目录:......
    03-14
  • Vue.js中v-show和v-if指令的用法介绍

    Vue.js中v-show和v-if指令的用法介绍

    一、v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏。v-show后面跟的是判断条件,语法如下: 1 v-show=判断变量 例如: v-show=true,表示显示DOM元素。 v-show=fal......
    03-13
  • jQuery操作元素节点的介绍

    jQuery操作元素节点的介绍

    jQuery中节点操作主要分为以下几种: 查找节点。 创建节点。 插入节点。 替换节点。 复制节点。 删除节点。 一、查找节点 示例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19......
    03-11
  • JavaScript的事件监听你了解吗

    JavaScript的事件监听你了解吗

    1.什么是事件监听 ? 事件监听就是计算机对事件进行监听,知道什么时候发生了这个事件,从而执行一些写好的程序。 那么,它的常用方法有哪些呢 ?让我们一起来看看......
    03-08
  • Javascript的原型和原型链你了解吗

    Javascript的原型和原型链你了解吗

    一、为什么要使用原型?怎样去理解原型的出现 1、对象字面量创建对象的缺点 想要介绍原型,就不得不提为什么我们要使用原型,在js早期,我们创建一个对象,比较流......
    03-03