React反向代理及样式独立详解

目录
  • 一、反响代理
    • 1.1 安装
    • 1.2 使用
  • 二、cssModule

一、反响代理

1.1 安装

使用命令：npm install http-proxy-middleware --save

1.2 使用

将之前的Film.js组件改成如下：

import React from 'react'
import {Route, Redirect, Switch, NavLink} from 'react-router-dom'
import NowPlay from './film/NowPlay'
import Comingsoon from './film/Comingsoon'

export default function Film() {
  return (
    <div>
      <h1>Film</h1>
      <ul>
        <li>
          <NavLink to="/film/nowplay">正在热映</NavLink>
        </li>
        <li>
          <NavLink to="/film/comingsoon">即将上映</NavLink>
        </li>
      </ul>
      <Switch>
        <Route path="/film/nowplay" component={NowPlay}></Route>
        <Route path="/film/comingsoon" component={Comingsoon}></Route>
        <Redirect from="/film" to="/film/nowplay"></Redirect>
      </Switch>
    </div>
  )
}

在src文件夹下新建一个setupProxy.js注意名称一定是这个。

写入如下代码：

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/gateway',
    createProxyMiddleware({
      target: 'https://m.maizuo.com',
      changeOrigin: true,
    })
  );
};

在Comingsoon.js组件中写入如下代码：

import axios from 'axios'
import React, { Component } from 'react'
export default class Comingsoon extends Component {
  componentDidMount() {
    axios.get("/gateway?cityId=110100&pageNum=1&pageSize=10&type=2&k=3607029").then((res) => {
      console.log(res)
    }, (err) => {
      console.log(err)
    })
  }

  render() {
    return (
      <div>Comingsoon</div>
    )
  }
}

这样我们在开发时的代理就配置好了。

二、cssModule

在之前创建了这么多css文件：

我们将其重命名，中间加个固定的单词module(仅以middlecp.module.css为例)：

 接着修改引入： 

 效果： 

到此这篇关于React反向代理及样式独立详解的文章就介绍到这了,更多相关React反向代理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解react的两种动态改变css样式的方法

    第一种:动态添加class,以点击按钮让文字显示隐藏为demo import React, { Component, Fragment } from 'react'; import './style.css'; class Demo extends Component{ constructor(props) { super(props); this.state = { display: true } this.handleshow = this.handleshow.bind(this) thi

  • react四种组件中DOM样式设置方式详解

    1.行内样式 想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现 行内样式需要写入一个样式对象,而这个样式对象的位置可以放在很多地方 例如:render函数里.组件原型上.外链js文件中 注意:这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 <p style={{color:'red', fontSize:'14px'}}>Hello world</p> 2.使用class React推荐我们使用行内样式,因为React觉得每一个组件都是一

  • JS跨域解决方案react配置反向代理

    JS跨域解决方案react配置反向代理

    跨域解决方案   jsonp(模拟get) CORS(跨域资源共享) 代理 iframe postMessage window.name WebSocket react的代理实现跨域 在配置在src/setupProxy.js文件,并通过npm安装http-proxy-middleware,代理中间件模块 创建 src/setupProxy.js 安装模块 npm i -S http-proxy-middleware    const {createProxyMiddleware: proxy}

  • React中使用外部样式的3种方式(小结)

    一.关于css-in-js的认识 1.css-in-js是一种使用 js 编写 css 样式的 css 处理方案.它的实现方案有很多,比如styled-components.polished.glamorous(paypal 开源的,不再维护).radium.emotion等等. 2.其中最成熟的便是styled-components和emotion.它们真正意义上实现了组件化style,可以说是专门为 react 打造的. 二.styled-components 简介 styled-compo

  • create-react-app使用antd按需加载的样式无效问题的解决

    官网给出的按需加载解决方案,先安装 babel-plugin-import 因为antd默认引入样式是less,所以需要手动配置为CSS,配置方法如下: 第一种方法:在package.json中配置,这种方法成功的前提是webpack里query下配置babelrc:true, 这样就会使用babelrc文件中的配置 "babel": { "presets": [ "react-app" ], "plugins": [ [ &

  • React反向代理及样式独立详解

    React反向代理及样式独立详解

    目录 一.反响代理 1.1 安装 1.2 使用 二.cssModule 一.反响代理 1.1 安装 使用命令:npm install http-proxy-middleware --save 1.2 使用 将之前的Film.js组件改成如下: import React from 'react' import {Route, Redirect, Switch, NavLink} from 'react-router-dom' import NowPlay from './film/NowPlay'

  • 利用CDN加速react webpack打包后的文件详解

    此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置): publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/" 打包 NODE_ENV=production node_modules/webpack/bin/webpack.js -

  • React全家桶环境搭建过程详解

    本文介绍了React全家桶环境搭建过程详解,分享给大家,具体如下: 环境搭建 1.从零开始搭建webpack+react开发环境 2.引入Typescript 安装依赖 npm i -S @types/react @types/react-dom npm i -D typescript awesome-typescript-loader source-map-loader 新建tsconfig.json { "compilerOptions": { "outDir"

  • react国际化化插件react-i18n-auto使用详解

    react-i18n-auto专门为中文国际化提供的自动化方案,快速迭代国际化开发,方法如下 安装 npm install react-i18n-auto --save-dev 第一步:添加babel插件配置(.babelrc添加方式) { "plugins": [ "@babel/plugin-transform-runtime", "react-i18n-auto", "..." ] } 第二步:添加自动化配置 i18n.

  • Python3爬虫关于代理池的维护详解

    我们在上一节了解了代理的设置方法,利用代理我们可以解决目标网站封 IP 的问题,而在网上又有大量公开的免费代理,其中有一部分可以拿来使用,或者我们也可以购买付费的代理 IP,价格也不贵.但是不论是免费的还是付费的,都不能保证它们每一个都是可用的,毕竟可能其他人也可能在用此 IP 爬取同样的目标站点而被封禁,或者代理服务器突然出故障或网络繁忙.一旦我们选用了一个不可用的代理,势必会影响我们爬虫的工作效率. 所以说,在用代理时,我们需要提前做一下筛选,将不可用的代理剔除掉,保留下可用代理,接下来在获

  • react.js框架Redux基础案例详解

    react.js框架Redux基础案例详解

    react.js框架Redux https://github.com/reactjs/redux 安装: npm install redux react-redux #基于react,我们在前面已经安装过了 Redux参考文档: http://redux.js.org/ Redux核心概念:Store 我们可以简单的理解为就是用来存储 各个组件的State或你自己定义的独立的state,对state进行统一读取.更新.监听等操作. http://redux.js.org/docs/basics/

  • react编写可编辑标题示例详解

    目录 需求 初始需求 方案设计 方案一 span + contentEditable 思路 代码如下 在这个方案中遇到的问题 存在的问题 方案二 直接用input处理展示和编辑 踩到的坑 需求 因为自己换工作到了新公司,上周入职,以前没有使用过react框架,虽然前面有学习过react,但是并没有实践经验 这个需求最终的效果是和石墨标题修改实现一样的效果 初始需求 文案支持可编辑 用户点击位置即光标定位处 超过50字读的时候,超出部分进行截断 当用户把所有内容删除时,失去焦点时文案设置为 “无文

  • java 代理机制的实例详解

    java 代理机制的实例详解 前言: java代理分静态代理和动态代理,动态代理有jdk代理和cglib代理两种,在运行时生成新的子类class文件.本文主要练习下动态代理,代码用于备忘.对于代理的原理和机制,网上有很多写的很好的,就不班门弄斧了. jdk代理 实例代码 import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflect.Proxy; publi

  • react中的ajax封装实例详解

    react中的ajax封装实例详解 代码块 **opts: {'可选参数'} **method: 请求方式:GET/POST,默认值:'GET'; **url: 发送请求的地址, 默认值: 当前页地址; **data: string,json; **async: 是否异步:true/false,默认值:true; **cache: 是否缓存:true/false,默认值:true; **contentType: HTTP头信息,默认值:'application/x-www-form-urlenc

  • JavaScript操作class和style样式代码详解

    废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-"> <title>无标题文档</title> <style> .fontSize { font-size:px; } .fontWeight { font-weight:bold; } </style> </head> &l

随机推荐