Sep*_*phy 22 javascript html5 reactjs react-router
我以为我开始理解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'));
我也尝试<base href="/"/>在我的index.html中添加一个,但是在控制台中我得到一个很好的红色警告,所以也许不是最好的主意:
警告:不建议使用自动设置basename,并将在下一个主要版本中删除.语义与basename略有不同.请在createHistory选项中明确传递basename
ham*_*son 23
听起来您已经定义了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: '/'
},
...
我有同样的问题.
<base href="http://whatever">使用默认的browserHistory 将标记添加到包含react-router的HTML的页面的头部
加载页面 - history.js将输出2个错误,警告:<base href>不推荐使用自动设置basename ,并将在下一个主要版本中删除.语义与basename略有不同.请在createHistory选项中明确传递basename
更改react-router历史记录以使用历史记录所在的历史记录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")
);
然后重新加载警告消失.希望这很有用.
| 归档时间： |
|
| 查看次数： |
13714 次 |
| 最近记录： |