這篇文章主要講解了“react刷新找不到頁面如何解決”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“react刷新找不到頁面如何解決”吧!
創(chuàng)新互聯(lián)公司成立于2013年,先為舒城等服務建站,舒城等地企業(yè),進行企業(yè)商務咨詢服務。為舒城企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
react刷新找不到頁面的解決辦法:1、找到并打開“app.jsx”文件;2、在“app.jsx”里面定義路由協(xié)議的時候通過“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里面的靜態(tài)文件
后端沒有錯誤就開始查看前端的文件
既然是路由路徑不對我就查找路由相關的信息,然后就找到答案了。是因為我使用的是
BrowserRouter
錯誤原因:
客戶端路由和服務端路由是有區(qū)別的,你在瀏覽器內可以由首頁跳轉到其他路由地址,是因為這是由前端自行渲染的,你在React Router定義了對應的路由,腳本并沒有刷新網(wǎng)頁訪問后臺,是JS動態(tài)更改了location。
當你刷新時,你首先是訪問的后臺地址,然后返回的頁面內加載了React代碼,最后在瀏覽器內執(zhí)行;也就是說如果這個時候報404,是因為你后臺并沒有針對這個路由給出返回HTML內容,也談不上執(zhí)行React Router了。
使用HashRouter,不要使用BrowserRouter,這樣所有的請求都會定位到index.html這一個頁面,服務器端也不需要任何配置了。
解決方法 :
在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;
感謝各位的閱讀,以上就是“react刷新找不到頁面如何解決”的內容了,經(jīng)過本文的學習后,相信大家對react刷新找不到頁面如何解決這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關知識點的文章,歡迎關注!
名稱欄目:react刷新找不到頁面如何解決
網(wǎng)頁網(wǎng)址:http://vcdvsql.cn/article22/gjdscc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃、網(wǎng)站維護、域名注冊、定制開發(fā)、網(wǎng)站設計、電子商務
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)