测开技能--Web开发 React 学习（十四）

雷子

发布于 2021-03-15 12:58:58

3510

发布于 2021-03-15 12:58:58

接上篇，我们封装后，肯定需要调用我们看下如何去调用的。

首先我们先导入

import api from "../api/index"

然后我们可以在fuction 中这么去调用

 const parame = {};
        parame['id'] = value
        api.delete_interface(parame).then(res => res.json()).then(data => {
            if (data.code != 0) {
                message.error(data.msg)
            } else {
                message.success("删除成功")
                window.location.reload()
            }
        })

我们先去组织参数，然后对请求，传参，接受返回数据，对数据进行接受处理。这样就可以进行展示或者弹出来对应的信息，我这里的message 是利用antd框架中的。

那么我们接下来看看路由

我们是需要安装的，输入命令

npm install react-router-dom --save

就可以让他进行安装。

路由的作用

单页面应用，路由跳转：来实现切换视图。

我们去创建一个pages目录，然后我们去创建几个页面，注意 pages 在src 目录下面，创建了一个project.jsx,和interface.jsx

import  React from "react";
export default class Project extends React.Component{
    render() {
        return (
            <h1>project</h1>
        )}
}

import  React from "react";


const Inteface=()=>{
    return(
        <h1>Inteface</h1>
    )
}
export default  Inteface

我们去编辑下app.jsx

import React from "react"
import Project from "./pages/project"
import Inteface from './pages/interface'
function App(){
    return (
        <div className="app">
            <Project/>
            <Inteface/>
        </div>
    )
}

这样我们可以去启动 npm start ，访问展示页面

我们想要在不同的链接跳转到不同的页面，我们就需要引入到我们路由

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

我们需要改造下

function App(){
    return (
        <div className="app">
            <Router>
                <Route path="/project" component={Project}></Route>
                <Route path="/interface" component={Inteface}></Route>

            </Router>
        </div>
    )
} export default App

这样，我们访问，直接展示空白，但是我们直接访问/project

就可以正常访问

使用HashRouter 也可以实现，这里的，只需要把BrowserRouter 改成HashRouter 即可，访问的时候的区别是

HashRouter 访问

http://localhost:3000/#/project

锚点链接

BrowserRouter 访问

  http://localhost:3000/project#/

h5的新特性，可能会出现404处理

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-07-30，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自雷子说测试开发微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度

测开技能--Web开发 React 学习（十四）

测开技能--Web开发 React 学习（十四）

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐