如何使反應路由器與靜態資產，html5模式，歷史API和嵌套路由一起工作？
[英]How to make react router work with static assets, html5 mode, history API and nested routes?
問題描述
我以為我開始理解React路由器了，但是當我添加一個為其組件加載css的庫時，我遇到了一個新的牆。 當從我家到導航到包含該組件的頁面時，一切正常，但是當我刷新它時，字體的網址被破壞了......
我在這里和這里找到了一些指針，但到目前為止沒有運氣。 這是一個常見的問題嗎？ 如何解決它？
我使用webpack dev服務器，默認配置由yeoman腳手架構建。
我使用的庫是React Fa來顯示圖標。
當我在http：// localhost：8000上加載我的應用程序/一切正常時，我導航到http：// localhost：8000 / customer / ABCD1234 / chat ，我的圖標都可以。 字體已正確加載。
然后我刷新頁面，我在控制台中看到：
DOMLazyTree.js？019b：56 GET http：// localhost：8000 / customer / ABCD1234 / assets / 926c93d201fe51c8f351e858468980c3.woff2
這顯然已被打破，因為客戶部分不應該在這里......
到目前為止，這是我的路由器：
ReactDOM.render(
<Router history={browserHistory}>
<Route path='/' component={App}>
<IndexRoute component={Index}/>
<Route path='customer/:id' component={Customer} />
<Route path='customer/:id/chat' component={CustomerChat}/>
<Route path="*" component={ NotFound } />
</Route>
</Router>
, document.getElementById('support-app'));
我也嘗試在我的index.html中添加一個<base href="/"/> ，但是在控制台中我得到一個很好的紅色警告，所以也許不是最好的主意：
警告：不建議使用自動設置basename，並將在下一個主要版本中刪除。 語義與basename略有不同。 請在createHistory選項中明確傳遞basename
4 個解決方案
解決方案1
22 已采納 2016-05-03 15:34:01
聽起來您已經定義了CSS中資產和圖標的相對路徑。
background-image: url('assets/image/myicon.png')
相反，嘗試一個絕對路徑：
background-image: url('/assets/image/myicon.png')
由於React應用程序是單頁面應用程序，並且您在/上輸入了應用程序，因此無論您導航到哪個頁面，所有網址都將正常工作，因為它們與您啟動的根目錄相關。
但是，只要您在不同的路徑（例如/customer/ABCD上重新加載頁面，所有資產都將相對於此，因此您在控制台中看到了錯誤的URL。
此外，如果使用webpack，您可以嘗試在配置文件中設置publicPath ，如下所示：
...
output: {
path: 'assets',
publicPath: '/'
},
...
解決方案2
6 2016-05-04 03:27:52
我有同樣的問題。
使用默認的browserHistory將
<base href="http://whatever">標記添加到包含react-router的HTML的頁面的頭部加載頁面 - history.js將輸出2個錯誤，警告：不推薦使用
<base href>自動設置basename，並將在下一個主要版本中刪除。 語義與basename略有不同。 請在createHistory選項中明確傳遞basename更改react-router歷史記錄以使用歷史記錄，其中history是
const history = useRouterHistory(createHistory)({ basename: 'http://whatever' })，這應該可以解決問題（因為現在顯式傳遞了basename）重新加載頁面
https://github.com/reactjs/react-router/issues/3387
5/9更新
就我而言。
的index.html
<head>
<base href="/" />
<script src="app.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
app.js
import { Router , useRouterHistory } from 'react-router'
import { createHistory } from 'history'
const browserHistory = useRouterHistory(createHistory)({ basename: '/' })
render(
<Router routes={routes} history={browserHistory}/>,
document.getElementById("app")
);
然后重新加載警告消失。 希望這很有用。
解決方案3
1 2018-10-11 09:24:30
感謝react-script：2+，我解決了這個問題
您只需要創建一個名為setupProxy.js的js文件，它將由開發服務器加載。 現在您可以完全控制代理：
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
console.log("configuring development proxies to point to localhost:4000")
app.use(proxy('/api', { target: 'http://localhost:4000/' }));
app.use(proxy('/graphql', { target: 'http://localhost:4000/' }));
};
解決方案4
0 2018-06-26 13:00:16
我通過在應用程序索引頁面上加載字體awesome cdn解決了這個問題。 然后它適用於所有情況下的所有路線。
如何在 React Router 6 中創建具有復雜動態嵌套路由的 Not Found 頁面？
[英]How to make a Not Found page with complex dymanic nested routes in React Router 6?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.