亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React Router 在構建到 ftp 服務器后不渲染組件

React Router 在構建到 ftp 服務器后不渲染組件

qq_花開花謝_0 2023-05-19 17:05:39
我用yarn build. 為了讓應用程序在我的服務器上運行,我添加"homepage": "./"了 package.json 文件。該應用程序存儲在服務器上的一個文件夾中,我使用https://my-url.com/appname訪問該應用程序App.js 已呈現,但我沒有看到我的組件:function App() {  const [navigationState, setNavigationState] = useState(false);  return (    <div className="App">      <Router>        <Header          showNavigation={navigationState}          setShowNavigation={setNavigationState}        />        <Switch>          <Route path="/" exact component={Home} />          <Route path="/contact" exact component={Contact} />        </Switch>        <Footer />      </Router>      <div className="space"></div>    </div>  );}在Header組件中我有我的鏈接<Link to="/">Home</Link> <Link to ="/contact">Contact</Link>當我單擊HomeURL 切換到https://my-url.com/時,我看到了 Home 組件。單擊ContactURL 切換到https://my-url.com/contact后,我看到了聯系人。我的 .htaccess 看起來像:<IfModule mod_rewrite.c>  RewriteEngine On  RewriteBase /  RewriteRule ^index\.html$ - [L]  RewriteCond %{REQUEST_FILENAME} !-f  RewriteCond %{REQUEST_FILENAME} !-d  RewriteCond %{REQUEST_FILENAME} !-l  RewriteRule . /index.html [L]</IfModule>我需要做什么才能保留文件夾路徑并在第一次調用時呈現主組件?https://my-url.com/ 404https://my-url.com/appname顯示 App Component 但不呈現 Home 組件https://my-url.com/appname/contact 404https://my-url.com/contact 404單擊主頁鏈接后,我得到 -https://my-url.com/ 顯示主頁組件單擊聯系人鏈接后,我得到 https://my-url.com/contact顯示聯系人組件在兩個 url 上重新加載頁面會給出404.
查看完整描述

4 回答

?
千巷貓影

TA貢獻1829條經驗 獲得超7個贊

為了讓它工作,我做了以下步驟:


添加.htaccess文件到public文件夾:

Options -MultiViews

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^ index.html [QSA,L]

修改package.json并添加:

"homepage": "http://my-url.com/foldername"

在App.js將文件夾名稱添加到<Route path="<<here>>" />:

<Route path="/foldername/" exact component={Home} />

<Route path="/foldername/contact" exact component={Contact} />


查看完整回答
反對 回復 2023-05-19
?
呼如林

TA貢獻1798條經驗 獲得超3個贊

我在以前的項目中遇到過這個問題,因為它是帶有 apache 的 GoDaddy Linux 主機,所以我添加了這一行


"homepage": "my-url.com" 到你的 package.json


然后我編輯了我的 .htaccess 文件,在上面添加了我的主要路線


我使用的文件有這個內容


RewriteOptions inherit

RewriteEngine On

  RewriteBase /

  RewriteCond %{REQUEST_FILENAME} !-f

  RewriteCond %{REQUEST_FILENAME} !-d

  RewriteCond %{REQUEST_FILENAME} !-l

  RewriteRule . / [L]


查看完整回答
反對 回復 2023-05-19
?
冉冉說

TA貢獻1877條經驗 獲得超1個贊

我認為這可能與 react-router 處理客戶端或服務器端渲染 (SSR) 渲染的方式有關。請檢查此文檔片段以正確設置客戶端 https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing

或者嘗試將渲染配置更改為 SSR,應該沒問題。


查看完整回答
反對 回復 2023-05-19
?
翻閱古今

TA貢獻1780條經驗 獲得超5個贊

有同樣的問題!我解決了它以BrowserRouterHashRouter我的App.jsx. 我的 FTP 無法處理BrowserRouter.

在我更新所有內容后,它工作正常。


查看完整回答
反對 回復 2023-05-19
  • 4 回答
  • 0 關注
  • 202 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號