react刷新找不到頁面的解決方案:1、找到並開啟「app.jsx」檔案;2、在「app.jsx」裡面定義路由協定的時候透過「class App extends Component {render () {return (e1c0a17a2781361d11c936c2de98a588a7f2cf15f06fbef780c6b2609731da81dc6dce4a544fdca2df29d5ac0ea9906b6ca29c7f0aa0f99fe256c27c3b1e1299117a224c00ca84aef0d015e294d20efe16b28748ea4df4d9c2150843fecfba68...」代碼定義即可。
本教學操作環境: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中文網其他相關文章!