广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >react刷新找不到页面怎么办
  • 211
分享到

react刷新找不到页面怎么办

React 2023-05-14 22:05:19 211人浏览 薄情痞子
摘要

本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react刷新找不到页面怎么办?react部署完以后,刷新页面会报错找不到视图今天上午部署完项目以后点击路由都可以跳转,但是在相应的路由刷新的时候却报错了

react刷新找不到页面怎么办

教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。

react刷新找不到页面怎么办?

react部署完以后,刷新页面会报错找不到视图

今天上午部署完项目以后点击路由都可以跳转,但是在相应的路由刷新的时候却报错了。

Failed to lookup view "error" in views directory

项目在本地的时候是可以正常使用的,单是为什么部署到服务器上以后刷新它就报错。无法找到对应的视图了呢?

首先排查了noded的配置文件。因为我是把react的项目npm run build以后,把build后的文件放在node的public文件里面。这样启动后端node bin/www以后,node就可以读取public里面的文件。然后开始查看node的app.js文件,文件里面都是配置好的

app.set('views', path.join(__dirname, 'views'));
app.engine('.html',require('ejs').__express);
// app.set('view engine', 'jade');
app.set('view engine', 'html');
app.use(logger('dev'));
app.use(express.JSON());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public'))); //这句话就是express会读取public里面的静态文件

后端没有错误就开始查看前端的文件

既然是路由路径不对我就查找路由相关的信息,然后就找到答案了。是因为我使用的是

BrowserRouter

错误原因:

客户端路由和服务端路由是有区别的,你在浏览器内可以由首页跳转到其他路由地址,是因为这是由前端自行渲染的,你在React Router定义了对应的路由,脚本并没有刷新网页访问后台,是JS动态更改了location。

当你刷新时,你首先是访问的后台地址,然后返回的页面内加载了React代码,最后在浏览器内执行;也就是说如果这个时候报404,是因为你后台并没有针对这个路由给出返回HTML内容,也谈不上执行React Router了。

使用HashRouter,不要使用BrowserRouter,这样所有的请求都会定位到index.html这一个页面,服务器端也不需要任何配置了。

解决方法 :

在app.jsx里面定义路由协议的时候可以如下这个定义:

import React, { Component} from 'react';
 import { HashRouter  as Router  } from "react-router-dom";
 import Nav from './component/Menu/Menu';
 import FootContent from './component/Footer/Footer';
 import MinContent from './component/content/mainContent';
 import {Layout} from 'antd';
   class App extends Component {
     render() {
       return (
        <Layout className="layout">
        <Router>
        <div>
        <Nav  />
        <MinContent />
        </div>
      </Router>
      <FootContent />
      </Layout>
       );
     }
   }
 
   export default App;

以上就是react刷新找不到页面怎么办的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: react刷新找不到页面怎么办

本文链接: https://www.lsjlt.com/news/206747.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • react刷新找不到页面怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react刷新找不到页面怎么办?react部署完以后,刷新页面会报错找不到视图今天上午部署完项目以后点击路由都可以跳转,但是在相应的路由刷新的时候却报错了...
    99+
    2023-05-14
    React
  • react刷新找不到页面如何解决
    这篇文章主要讲解了“react刷新找不到页面如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react刷新找不到页面如何解决”吧!react刷新找不到页面的解决办法:1、找到并打开“a...
    99+
    2023-07-04
  • react路由页面不刷新怎么办
    本教程操作环境:Windows10系统、react-router v5版、Dell G3电脑。react路由页面不刷新怎么办react-router5 路由跳转页面不刷新问题原因 1. index.js文件中查看App组件是否被包裹在<...
    99+
    2023-05-14
    React
  • vue不刷新当前页面怎么办
    本教程操作环境:Windows10系统、Vue 3版、Dell G3电脑。vue不刷新当前页面怎么办?vue项目中数据更新页面不刷新问题这种情况可以分为很多种.但是究其原因就是vue3.0以下版本无法监听对象(包括数组以及对象)的变化,当数...
    99+
    2023-05-14
    Vue
  • react 不自动刷新怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react 不自动刷新怎么办?react项目,修改文件保存后,页面不会自动刷新解决方案:在package.json同级根目录下创建 .env文件写入:FA...
    99+
    2023-05-14
    React
  • react页面传值刷新后值消失怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react页面传值刷新后值消失怎么办?解决react路由跳转传参刷新页面后参数丢失问题import { useHistory } from 're...
    99+
    2023-05-14
    刷新 React
  • react获取不到页面元素怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react获取不到页面元素怎么办?react+antd useEffect中获取不到tabs隐藏页中的元素具体问题描述:页面有多个tabs标签页,在第二个...
    99+
    2023-05-14
    React
  • Vue路由this.route.push跳转页面不刷新怎么办
    本篇内容主要讲解“Vue路由this.route.push跳转页面不刷新怎么办”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue路由this.route.push跳转页面不刷新怎么办”吧!Vu...
    99+
    2023-07-04
  • react路由页面不刷新如何解决
    这篇文章主要介绍“react路由页面不刷新如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react路由页面不刷新如何解决”文章能帮助大家解决问题。react路由页面不刷新的解决办法:1、在“...
    99+
    2023-07-04
  • react路由返回时不刷新怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react路由返回时不刷新怎么办?react 跳转后路由变了页面没刷新的解决方案最近在学习React的过程中遇到了路由跳转后页面不刷新的问题,本文就详细的...
    99+
    2023-05-14
    React
  • vue-router3.0版本中 router.push 不能刷新页面怎么办
    这篇文章主要为大家展示了“vue-router3.0版本中 router.push 不能刷新页面怎么办”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue-ro...
    99+
    2022-10-19
  • react 怎么实现跳转到新页面
    本教程操作环境:Windows10系统、react18版、Dell G3电脑。react 怎么实现跳转到新页面?react 点击跳转新页面跳转方法:在前端的实战开发中我们需要用到框架的地方是比较广泛的,今天我们就来说说在“react 怎么点...
    99+
    2023-05-14
    React
  • React怎么使用refresh_token实现无感刷新页面
    这篇文章主要介绍了React怎么使用refresh_token实现无感刷新页面的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇React怎么使用refresh_token实现无感刷新页面文章都会有所收获,下面我们...
    99+
    2023-06-30
  • react纯函数组件setState更新页面不刷新的解决
    目录问题描述: 原因分析: 解决方案: 补:react中,hooks钩子时useState更新不渲染组件的问题问题描述: const [textList, setTextLis...
    99+
    2022-11-12
  • nginx部署react刷新404怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。nginx部署react刷新404怎么办?nginx部署react应用,刷新路由报404nginx部署react单页应用时,如果跳转到某一个路由,然后刷新...
    99+
    2023-05-14
    React nginx
  • php怎么实现返回不刷新页面
    本文操作环境:Windows7系统、PHP7.1版、DELL G3电脑php怎么实现返回不刷新页面?PHP实现返回上一页不刷新 和刷新的方法返回上一页不刷新:echo"<script>alert('已从错题本中...
    99+
    2018-11-23
    php
  • vue menu不刷新怎么办
    本教程操作环境:Windows10系统、Vue 3版、Dell G3电脑。vue menu不刷新怎么办?vue 实现组件切换tab(菜单)页不刷新页面vue 实现组件切换tab(菜单)页不刷新页面(keep alive)<keep-a...
    99+
    2023-05-14
    刷新 menu Vue
  • JavaScript中怎么刷新页面
    小编给大家分享一下JavaScript中怎么刷新页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2022-10-19
  • pecl找不到怎么办
    本教程操作环境:CentOS 7.2系统、PHP8.1版、Dell G3电脑。pecl php 找不到怎么办?通过pecl安装php扩展,未找到pecl命令的解决办法以安装swoole为例:#Ubuntu/Debian上是这样(php-pe...
    99+
    2022-11-14
  • AngualrJS页面刷新导致异常显示怎么办
    小编给大家分享一下AngualrJS页面刷新导致异常显示怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!页面正常加载后,显示...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作