• 技术文章 >web前端 >前端问答

    react刷新找不到页面怎么办

    藏色散人藏色散人2023-01-06 09:26:32原创107

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

    本教程操作环境: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视频教程

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React
    上一篇:react有哪些方法改变state 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react不能解析css怎么办• react 装饰器报错怎么办• react创建元素的方法是什么• 深入详解React中的ref• react有哪些方法改变state
    1/1

    PHP中文网