React实现页面之间的跳转

React实现页面之间的跳转

目录

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

1. 需求说明

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 (

Home List App

对抗攻击

对抗检测

对抗防御

数据隐私

{/*

Content

*/}

我们还需要在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( { mainRoute.map( (route, key)=>{ return }) } , document.getElementById('root'));reportWebVitals();

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

4. 效果展示

5. 参考文献

​​1. react 路由跳转 / react-router-dom 使用​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。