react刷新找不到頁面的解決辦法：1、找到并打開“app.jsx”文件；2、在“app.jsx”里面定義路由協(xié)議的時候通過“class App extends Component {render() {return (

...”代碼定義即可。

本教程操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。

react刷新找不到頁面怎么辦？

react部署完以后，刷新頁面會報錯找不到視圖

今天上午部署完項目以后點擊路由都可以跳轉(zhuǎn)，但是在相應(yīng)的路由刷新的時候卻報錯了。

Failed to lookup view "error" in views directory

項目在本地的時候是可以正常使用的，單是為什么部署到服務(wù)器上以后刷新它就報錯。無法找到對應(yīng)的視圖了呢？

首先排查了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里面的靜態(tài)文件

后端沒有錯誤就開始查看前端的文件

既然是路由路徑不對我就查找路由相關(guān)的信息，然后就找到答案了。是因為我使用的是

BrowserRouter

錯誤原因：

客戶端路由和服務(wù)端路由是有區(qū)別的，你在瀏覽器內(nèi)可以由首頁跳轉(zhuǎn)到其他路由地址，是因為這是由前端自行渲染的，你在React Router定義了對應(yīng)的路由，腳本并沒有刷新網(wǎng)頁訪問后臺，是JS動態(tài)更改了location。

當(dāng)你刷新時，你首先是訪問的后臺地址，然后返回的頁面內(nèi)加載了React代碼，最后在瀏覽器內(nèi)執(zhí)行；也就是說如果這個時候報404，是因為你后臺并沒有針對這個路由給出返回HTML內(nèi)容，也談不上執(zhí)行React Router了。

使用HashRouter，不要使用BrowserRouter，這樣所有的請求都會定位到index.html這一個頁面，服務(wù)器端也不需要任何配置了。

解決方法 :

在app.jsx里面定義路由協(xié)議的時候可以如下這個定義：

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;

推薦學(xué)習(xí)：《react視頻教程》

以上是react刷新找不到頁面怎么辦的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！