React实现页面之间的跳转

原创

流年若逝 2022-07-18 21:30:17 博主文章分类：React ©著作权

©著作权归作者所有：来自51CTO博客作者流年若逝的原创作品，请联系作者获取转载授权，否则将追究法律责任

1. 需求说明

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

2. 技术实现

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

yarn add

或者使用npm安装：

npm install

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

3. 代码展示

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

在views/home/ndex.js 新建js文件
然后使用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;

我们还需要在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();