react-router 使用webpack-dev-server做服务器时单级刷新报错 Cannot GET /xx。多级刷新报错404

最新推荐文章于 2023-03-03 14:51:47 发布

LimonSea

最新推荐文章于 2023-03-03 14:51:47 发布

阅读量1.5k

点赞数 1

分类专栏： React进阶之路文章标签： react react-router

本文链接：https://blog.csdn.net/limonsea/article/details/96865906

版权

使用webpack-dev-server时，单级URL刷新出现Cannot GET /xx错误，多级URL刷新则报404。通过配置webpack-dev-server解决这些问题。

摘要由CSDN通过智能技术生成

服务器：webpack-dev-server

场景一：在当前单级url刷新时页面变为Cannot GET /xx，url如：localhost:8080/xxx

需要在webpack.config.js中配置：

module.exports = {
   
	......
	devServer: {
   
    	...
    	historyApiFallback: true, // 这句话
	},
}

场景二：在当前多级url刷新时页面控制台报错404，ur

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LimonSea

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

react-dev-utils:Webpack 4兼容的react-dev-utlis，https的独立fork

05-16

react-dev-utils 该软件包包括使用的一些实用。请参考其文档： –如何创建新应用。 –如何开发使用Create React App引导的应用程序。在创建React App项目中的用法这些实用程序默认包含在，默认情况下包括它。 ...

webpack-dev-server 404 找不到文件

enternal07的专栏

06-26

1978

webpack-dev-serverserves bundled files from the directory defined inoutput.path, i.e., files will be available underhttp://[devServer.host]:[devServer.port]/[output.publicPath]/[output.filename]

参与评论您还未登录，请先登录后发表或查看评论

react-router设置path无效，错误信息Cannot GET /xxx

这个昵称没有被占用吧的博客

03-03

4436

为了写react demo，搭了一个简介版的环境，因此webpack配置极其简单： const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: "development", entry: { app:..

webpack代理配置打包后接口404_webpack 从零开始

weixin_39796238的博客

11-25

1094

什么是webpack?webpack 可以看做是是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack的优点自带模块化(commonjs规范)编译功能：可以将es6...

react-router-dom项目中使用BrowserRouter出现Cannot GET /xxx 404问题

柯晓楠

03-10

1493

问题：在React项目中配置了react-router-dom路由之后，在组件中使用后，直接在地址栏访问指定路由时出现了404的问题，如下图：解决方法：因为项目是使用webpack构建的，所以在配置 webpack-dev-server 本地服务时，少了一些配置，只需要在 webpack.config.js 配置文件中添加 devServer 的配置项就可以了： module...

vue3+webpack5项目运行后刷新页面显示Cannot GET,报错404；使用webpack的historyApiFallback来解决404问题；vue运行抛出警告__VUE_OPTIONS

Sunny_lxm的博客

02-22

1255

vue3+webpack5项目运行后刷新页面显示Cannot GET,报错404；使用webpack的historyApiFallback来解决404问题； vue运行抛出警告__VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined.

react-router browserHistory刷新页面404问题解决方法

11-28

在分析问题时，我们需要考虑两个主要方面：`react-router`的前端路由配置和`webpack-dev-server`的服务配置。对于`react-router`，确保路由配置正确无误，例如使用`<Switch>`包裹所有路由，确保只有一条路由匹配成功...

利用React-router+Webpack快速构建react程序

01-19

本文主要介绍的是使用React-router和Webpack如何快速构建一个react程序，下面话不多说，感兴趣的可以一起学习学习。初始化项目我们先创建个空文件夹，然后初始化 package.json ,填写一些基本信息。 $ npm init ...

关于react-router/react-router-dom v4 history不能访问问题的解决

11-28

总结一下，`react-router-dom` v4版本中，要访问`history`对象，需要在应用中使用`BrowserRouter`作为顶级容器，并在子组件中声明`contextTypes`以接收`router`对象。这样，我们就可以在任何组件中实现动态的页面...

react-router4-template：react-v16 react-router-v4 redux webpack

01-31

2018.03.19：删除“ react-router-redux”模块，增加PWA配置，增加配置发布目录重要文件版本更多版本信息查看package.json文件 “React”：“ ^ 16.2.0” “ react-hot-loader”：“ ^ 4.0.0-beta.12” “ react...

解决webpack-dev-server无法通过 localhost 访问的问题

qq_41045128的博客

06-24

2974

解决webpack-dev-server无法通过 localhost 访问的问题

react 起项目（mac转Windows）报错原因分析及解决

小白目的博客

05-28

645

Windows 上用原mac上的方式，起项目报错： mac上start 没问题，但是window应该 dev！原因分析： 1）此处找不到这个命令是什么原因？无论是Windows还是linux和mac都是在环境变量中的路径里找命令，在path指定的路径里没找到React app mock，所以报这个错。然后REACT_APP_MOCK=true是想在系统中设置一个全局的环境变量Linux和mac可以这样用命令，但是Windows得环境变量不是这么配置的，所以报错。需要用env，查creat

Mac版配置reactNative android环境记述（折磨了我两天）

qq_41562587的博客

03-03

226

首先我想告诉大家的是配置环境：心态一定要好！！！！！！话不多说、我们开始正题：最可靠的当然是去看官方文档：https://reactnative.cn/docs/getting-started.html；文档我说一下，文档按理来说跟着他的流程应该可以配置好的，但是你的电脑由于各种原因导致没有配置好。（完全可以吧官方文档当做一个搭建框架，哪里缺什么你就补什么，也就是解决报错） Andro...

Mac开发ReactNative的命令行常见错误

KatherineLYP的博客

08-06

741

1.Failing run on IOS and Android because a syntax error in `local-cli 错误描述： having the same issue react-native run-ios /Users/admin/workspace/aelamd/node_modules/react-native/local-cli/server/check...

webpack代理配置打包后接口404_JavaScript之webpack打包

weixin_39775106的博客

12-12

1175

webpack是一个静态模块打包工具，使用webpack处理项目时，它会递地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle打包原理：识别入口文件逐层识别模块依赖（Commonjs、AMD或者ES6的import，webpack都会对其分析，从而获取代码的依赖）webpack分析代码-->转换代码-->编...

已解决：输入npx webpack-dev-server指令后控制台显示成功执行，但是浏览器显示 cannot get/，浏览器控制台显示404

cake_eat的博客

10-29

2010

原因：contentBase配置错误

前端路由刷新404问题

最新发布

qq_35469342的博客

03-03

1751

,然后就会在前端匹配到相应的组件进行渲染,但是如果此时我们刷新一下页面.就会出现页面 404 问题。解析,拿到ip地址然后根据ip地址向该服务器发起请求,服务器接受到请求之后,然后返回相应的结果(路由模式的时候,相当于我们直接去请求服务器上当前接口,如果服务器上并没有这个接口,那么就会报错(中配置代理转发的地方配置即可,可以最简单的配置为true。我们都知道在前端浏览器中,敲入一个url的时候(里面去配置的话,就会出现这个问题,究其原因是因为。直接创建的,那么这个问题是不会出现的,因为在。

react项目打包部署上线完毕后，刷新报错404

读心悦

12-17

7035

报错分析：在浏览器内可以从首页跳转到其他路由地址，而不报错是因为这些是由前端自己渲染的。React Router定义的对应路由，脚本并没有刷新访问请求后台数据，是JS动态更改的location。当刷新时，先访问的是后台地址，反馈数据后再加载页面内的React代码，最后才在浏览器内执行，这时报错404。是因为后台并没有针对这个过程的路由给出返回的HTML内容，就没有执行React-Router。...

超有效的解決方案：Failed to load resource: the server responded with a status of 404 (Not Found)

向日葵的专属太阳

05-03

8607

Failed to load resource: the server responded with a status of 404 (Not Found) 问题描述：在nextjs项目里想要引入图片，地址都是对的，但是最后报404错误解决办法： 1、在项目根目录添加一个static文件夹，在static中创建一个images文件夹，将图片放在images文件夹中。 2、引入方式 <img src="/static/images/bg.jpg" alt="bgImage" /> 3、安

React-Router4与Webpack实现代码拆分策略

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Orders from './Orders'; // 订单管理组件 function App() { return ( <Router> <Route path="/orders" component={...

react-router 使用webpack-dev-server做服务器时 单级刷新报错 Cannot GET /xx。多级刷新报错404

服务器：webpack-dev-server

react-router 使用webpack-dev-server做服务器时单级刷新报错 Cannot GET /xx。多级刷新报错404