React实现页面之间的跳转

秒速五厘米 2022-10-05 08:59 236阅读 0赞

### 目录 ###

*  1. 需求说明
 *  2. 技术实现
 *  3. 代码展示
 *  4. 效果展示
 *  5. 参考文献

# 1. 需求说明 #

目前在学习过程中需要结合自己之前复现的论文算法弄一个人工智能安全平台系统，其中需要做一个前端展示我们的模块，我们点击模块就可以跳转到相应的界面，因为之前做过一个这样的前端展示界面，但是是在别人的项目上改造过来的，很多技术细节都没有搞明白，这次做的就是自己亲自搭建的一个前端界面，所以需要用到关于React页面跳转的知识，下面就介绍下自己实现的这个基础功能吧。

# 2. 技术实现 #

功能很简单，就是实现一个界面到另外一个界面之间的跳转，所以这里涉及到React里面的路由知识。  
首先，我们需要安装React中的一个核心包：react-router-dom  
react-router-dom-----应用于浏览器端的路由库（webApp）  
使用yarn安装：

yarn add react-router-dom

或者使用npm安装：

npm install react-router-dom --save

安装完成之后我们需要开始写我们的跳转界面，首先我们先写一个主界面，然后在主界面里面添加四张图，点击图片可以跳转到相应的界面。

# 3. 代码展示 #

这里只展示部分核心代码：

1.  在views/home/ndex.js 新建js文件
2.  然后使用Link跳转标签实现页面跳转

import React from 'react';
    import 'antd/dist/antd.css';
    import {  Layout, Menu, Breadcrumb, Row, Col } from 'antd';
    import tempImag from '../../assets/images/defense.png'
    import attackImg from '../../assets/images/attack.png'
    import detectImg from '../../assets/images/detect.png'
    import privacyImg from '../../assets/images/privacy.png'
    import {  Link } from 'react-router-dom';
    
    
    const {  Header, Content, Footer } = Layout;
    
    function Home() { 
        return (
        <Layout className="layout" style={ { height:700}}>
            <Header>
                <div className="logo" />
                <Menu theme="dark" mode="horizontal" >
                    人工智能安全平台
                </Menu>
            </Header>
    
            <Content style={ {  padding: '0 50px' }}>
                <Breadcrumb style={ {  margin: '16px 0' }}>
                    <Breadcrumb.Item>Home</Breadcrumb.Item>
                    <Breadcrumb.Item>List</Breadcrumb.Item>
                    <Breadcrumb.Item>App</Breadcrumb.Item>
                </Breadcrumb>
                <div style={ { marginTop: 100, marginLeft: 20, marginRight: 50}}>
                <Row gutter={ 100} justify="center">
                    <Col>
                        <div className='base-style'>
                            <Link to="/attack/" style={ { color:'black'}}>
                            <img src={ attackImg}/>
                            </Link>
    
                        </div>
                        <p style={ { fontFamily: "宋体", textAlign: "center"}}>对抗攻击</p>
                    </Col>
                    <Col>
                        <div className='base-style'>
                            <Link to="/detect/" style={ { color:'black'}}>
                                <img src={ detectImg}/>
                            </Link>
                        </div>
                        <p style={ { fontFamily: "宋体", textAlign: "center"}}>对抗检测</p>
                    </Col>
    
    
                    <Col>
                        <div className='base-style'>
                            <Link to="/defense/" style={ { color:'black'}}>
                                <img src={ tempImag}/>
                            </Link>
                        </div>
                        <p style={ { fontFamily: "宋体", textAlign: "center"}}>对抗防御</p>
                    </Col>
                    <Col>
                        <div className='base-style'>
                            <Link to="/dataPrivacy/" style={ { color:'black'}}>
                                <img src={ privacyImg}/>
                            </Link>
                        </div>
                        <p style={ { fontFamily: "宋体", textAlign: "center"}}>数据隐私</p>
                    </Col>
                </Row>
    
                </div>
    
                { /*<div className="site-layout-content">Content</div>*/}
            </Content>
            <Footer style={ {  textAlign: 'center' }}>人工智能安全平台 ©2021 Created by 广州大学人工智能与区块链学院</Footer>
        </Layout>
    
        );
    }
    
    export default Home;

1.  我们还需要在src/index.js中配置路由，如下所示：

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
    import {  HashRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
    import {  mainRoute } from './routes';
    import Attacks from './views/attack';
    import Defense from './views/defense';
    import Detect from './views/detect';
    import DataPrivacy from './views/dataPrivacy';
    
    ReactDOM.render(
        <Router>
            <Switch>
                <Route path="/admin" component={ App}/>
                <Route path="/attack" component={ Attacks}/>
                <Route path="/defense" component={ Defense}/>
                <Route path="/detect" component={ Detect}/>
                <Route path="/dataPrivacy" component={ DataPrivacy}/>
                { 
                    mainRoute.map( (route, key)=>{ 
                        return <Route path={ route.pathname} component={ route.component} key={ key}/>
                    })
                }
    
                <Redirect to='/home' from='/' exact/>
            </Switch>
        </Router>,
        document.getElementById('root')
    );
    
    reportWebVitals();

完整代码链接：[1. React实现页面跳转][1. React]  
记得给个star，哈哈哈

# 4. 效果展示 #

![在这里插入图片描述][20210608112041370.gif_pic_center]

# 5. 参考文献 #

[1. react 路由跳转 / react-router-dom 使用][1. react _ _ react-router-dom]

[1. React]: https://github.com/yeahCatlikefish/ReactProject
[20210608112041370.gif_pic_center]: /images/20221005/01f2f08ab7944377b0bf7d10d6c603c8.png
[1. react _ _ react-router-dom]: https://blog.csdn.net/qq_44163269/article/details/107385703?utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-8.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-8.control