react刷新无法找到页面如何解决

发布时间：2023-07-10 11:00:44 所属栏目：教程来源：转载

导读： 　　这篇文章主要讲解了“react刷新找不到页面如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“react刷新找不

　　这篇文章主要讲解了“react刷新找不到页面如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“react刷新找不到页面如何解决”吧！

　　react刷新找不到页面的解决办法：1、找到并打开“app.jsx”文件；2、在“app.jsx”里面定义路由协议的时候通过“class App extends Component {render() {return (<Layout className="layout"><Router><div><Nav /><MinContent /></div>...”代码定义即可。

　　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;

（编辑：航空爱好网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!