react重新整理找不到頁面怎麼辦

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重新整理找不到頁面怎麼辦的詳細內容，更多請關注TW511.COM其它相關文章！