用react搭建完项目，切换接口后刷新页面，接受不到页面

最新推荐文章于 2022-09-25 22:55:47 发布
最新推荐文章于 2022-09-25 22:55:47 发布
阅读量812 收藏
点赞数 1
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45825077/article/details/105632699
版权

问题

用react搭建完项目，正常点击操作可以完成切换，但是一旦切换接口后刷新页面，页面会提示 Cannot Get ***，
在这里插入图片描述
无法正常显示页面，必须要切换到首页之后，再进行点击才可以跳转页面，控制台显示如图所示：
在这里插入图片描述

原因

服务器的/接口会返回一个react项目的html文件，但是如果直接访问/shopppingCar接口的话不能完成，因为这个接口是只有在index.html中才提供的，react做前端之后，路由分配给了前端处理，不访问index.html文件就不能访问到接口

解决

将BrowserRouter改成HashRouter，重新npm run build生成，就可以进行页面的刷新了
在这里插入图片描述
（会在地址栏多添加一个#）
在这里插入图片描述
这样就简单解决不能刷新的问题了

还在摸鱼嘛
关注
21.react-app：react项目案例
02-10
- 如果项目中涉及到页面间的跳转，可能使用了`React Router`库，它允许我们在React应用中实现客户端路由，无需刷新页面即可切换视图。 7. **CSS in JS** - 项目可能使用了CSS预处理器（如Sass或Less）或者CSS模块...
React-Router 刷新后报错 or Cannot GET /detail
zwkkkk1的博客
10-26 6705
  这是今天自己随便鼓捣 React-Router 的官方 demo 所遇到的问题，具体表现是：'/' 根节点 Home 显示无误，不过其他任何路由 例如 /detail，均显示 Cannot GET /detail。 在我反复确认 js 代码与官方给出的代码一致后，我开始从 webpack 寻找答案。 果然很快，我就找到类似的问题： React-router v4 - cannot GET u...
react-rotuer在子路由界面报Cannot GET /(子路由名)
hehepeng123的博客
03-08 1333
import React from 'react' import ReactDOM from 'react-dom' import {HashRouter as Router, Route } from 'react-router-dom' //import {BrowserRouter as Router,Route} from 'react-router-dom' import App fr...
react Cannot GET /
彻底拆分，一切可控！
06-29 5962
react Cannot GET /
React 本地调用后端接口实现数据交互
热门推荐
C11611的博客
08-20 3万+
系统环境: mac +react+flask 问题说明,前端使用axios 本地调用python的数据接口. 在网上查询了各种资料,有很多解决办法,但是很遗憾,都没有解决我的问题.(可能是自己太小白,没有配置正确).现使用以下方案进行解决. 在flask端使用 “Flask-CORS”代理插件.(官网:https://flask-cors.readthedocs.io/en/latest/),...
React页面跳转取消上一个页面的所有请求
见贤思齐焉，见不贤内自省
02-15 3312
React页面跳转取消上一个页面的所有请求
浅谈移动端页面无刷新跳转问题的解决方案.docx
10-26
然而，传统多页面应用程序在页面跳转过程中存在诸多问题，如页面刷新导致的卡顿、加载时间过长以及用户体验不佳等。这些问题直接影响了用户对应用的好感度，进而可能降低应用的留存率。 针对这一现状，本文将探讨一...
单页面后台管理html模板
04-19
例如，使用Vue Router或React Router，开发者可以定义各个路由路径，并关联到相应的视图组件，实现页面间的平滑过渡。 6. **API通信**： 为了获取和更新数据，SPA需要与后端服务器进行通信。通常使用Ajax或Fetch ...
vite-react-demo.zip
12-20
在这个"vite-react-demo.zip"压缩包中，包含的是一个使用Vite搭建的React项目，让我们一起来深入了解一下这个项目的构成和涉及的技术栈。 1. **React**: React是Facebook开源的一个用于构建用户界面的JavaScript库...
react
03-16
- 使用Create React App工具可以快速搭建React项目，它包含了开发环境的配置，使开发者能更专注于编写业务逻辑。 9. **性能优化**： - React通过shouldComponentUpdate、PureComponent和React.memo等手段进行性能...
React中返回上一个页面保留原来的值
sakura的博客
07-01 5607
前几天项目有个新的小需求，就是财务那边说在搜索完毕，点击详情页后再返回，原来的搜索条件就没有了需要再输入一遍。就希望返回时保留原来的输入条件。 我实现这个功能的主要思想是当点击搜索按钮时，增加一个事件把搜索条件全部给存到本地。然后返回的时候页面初始化再把存在的搜索条件给赋值到输入框里面，最后清除掉本地的缓存，就可以了。 具体代码实现如下。 // 我打算在这里把输入框的内容给暂存下来 let setSearchVal =() => { let searchData = JSON.str
react-router设置path无效，错误信息Cannot GET /xxx
这个昵称没有被占用吧的博客
03-03 4450
为了写react demo，搭了一个简介版的环境，因此webpack配置极其简单： const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: "development", entry: { app:..
react tab切换 第一次切换到某个页面时会请求数据，以后不会再请求数据
徐同保的专栏
03-25 8802
目录结构： App.js: import React, { Component } from 'react' import { connect } from 'react-redux' import Fruits from './Fruits/Fruits.js' import Phone from './Phone/Phone.js' import './App.css' ...
react中列表渲染的局部刷新
ConanZzz_的博客
05-11 1万+
最近在写demo的时候遇到一个更新列表中某个的对象的某个值，最期待的结果肯定是局部刷新，但是我们往往在改变值之后会遇到全局都刷新的问题，以下为个人实验出来的一个小技巧。 首先我有以下数据需要通过react的列表方法渲染： let list=[ { id:1, show:false }, { id:2, s...
Reactjs中列表数据不刷新最快解决而方案
qq_36205027的博客
06-03 3470
遇到好几次了这个问题了, 每次数据setState是个引用Obj的话,reactjs不会比对太多细节,导致我们setState或者通过父组件props传递给子组件数据时不进行刷新,最快速的方法是先清空数据,然后再重新赋值即可 delete = (item) => () => { this.props.cancleDialog() var self...
react——强制刷新页面三种方式（更）
阿牛哥的博客
09-25 1万+
react——强制刷新页面三种方式（更）
React使用useState异步刷新问题
m0_44982764的博客
06-09 4935
React使用useState异步刷新问题,组件渲染时都是上一次的数据
Android中免Root实现Hook的Dexposed框架实现原理解析以及如何实现应用的热修复
尼古拉斯.赵四的博客
11-01 1465
一、前言 今天我们来看一下阿里的一个开源框架Dexposed，关于这个框架网上已经有很多解析了，但是都是讲解原理，而且讲的不是很清楚，这里因为工作中的需要就研究了一下，所以这里就先讲解一下这个框架的原理，然后在通过一个例子来看看他如何使用，最后在用它来实现应用的热修复问题。 二、知识点准备 首先在讲解这个框架的时候，我们先来了解几个知识点： 1、关于之前的Xposed框架 我们在很早就知道了这个框架，本来想整理一下顺便说一下这个框架的，但是这个框架网上说的很多，而且也很详细，所以就不做太多的.
react项目实现调接口拿到数据到页面去使用
最新发布
03-14
可以使用 fetch 或 axios 等库来调用接口，将数据获取到后，可以使用 React 的 state 或 props 来传递数据到页面中进行展示。具体实现可以参考以下代码： ``` import React, { useState, useEffect } from 'react'; import axios from 'axios'; function App() { const [data, setData] = useState([]); useEffect(() => { axios.get('/api/data') .then(response => { setData(response.data); }) .catch(error => { console.log(error); }); }, []); return ( <div> {data.map(item => ( <div key={item.id}> <h2>{item.title}</h2> <p>{item.content}</p> </div> ))} </div> ); } export default App; ``` 其中，`axios.get('/api/data')` 是调用接口的代码，`setData(response.data)` 将获取到的数据存储到 state 中，`data.map()` 用来遍历数据并展示到页面中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值