React配置子路由的实现


Posted in Javascript onJune 03, 2021

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;

项目目录结构如下:

React配置子路由的实现

项目预览效果如下:

React配置子路由的实现

到此这篇关于React配置子路由的实现的文章就介绍到这了,更多相关React配置子路由内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
手机号码,密码正则验证
Sep 04 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
手把手教你从零开始react+antd搭建项目
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
js实现自动锁屏功能
Jun 02 #Javascript
如何将JavaScript将数组转为树形结构
Jun 02 #Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
You might like
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
python语言中with as的用法使用详解
2018/02/23 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
python 发送json数据操作实例分析
2019/10/15 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
Linux机考试题
2015/07/17 面试题
餐饮主管岗位职责
2013/12/10 职场文书
房展策划方案
2014/06/07 职场文书
工作失职检讨书500字
2014/10/17 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python