如何使静态资产，html5模式，历史API和嵌套路由作出反应路由器？ [英] How to make react router work with static assets, html5 mode, history API and nested routes?

问题描述

我以为我开始理解React Router，但是当我添加一个为其组件加载css的库时，我遇到了一堵新墙。当我从家里导航到包含该组件的页面时，一切正常，但当我刷新它时，字体的url被打破了......

我发现一些指针此处和这里但到目前为止没有运气。这是一个常见问题吗？如何解决它？

我使用webpack dev服务器，默认配置由 yeoman scaffolder 。

我使用的库是 React Fa 显示图标。

当我在 http：// localhost：8000 / 显示正常，然后导航到 http：// localhost：8000 / customer / ABCD1234 / chat 和我的图标都可以。

然后我刷新页面，并在控制台中看到：

DOMLazyTree .js？019b：56 GET http：// localhost：8000 / customer / ABCD1234 / assets / 926c93d201fe51c8f351e858468980c3.woff2

这明显是因为客户部分不应该在这里... \\ b
$ b

以下是我的路由器：

  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> 
< / Router> 
，document.getElementById（'s upport应用内））; 
  

我也尝试添加< base href =//> ; 到我的index.html中，但我在控制台中以红色显示了一个很好的警告，所以也许不是最好的主意：

警告：自动设置使用的basename是
已弃用，将在下一个主要版本中删除。
语义与basename略有不同。请
在选项中显式传递basename给createHistory

解决方案

听起来像你已经在你的CSS中定义了你的资产和图标的相对路径。

$ b

background-image：url（'assets / image / myicon.png' ）

改为尝试一个绝对路径：

background-image：url（'/ assets / image / myicon.png'）

由于React应用程序是单页应用程序，在 / 上输入您的应用，无论您导航到哪个网页，所有网址都可以正常工作，因为它们与您开始的根目录相关。

但是，只要您在不同路径（例如 / customer / ABCD ）上重新加载网页，您的所有资产如果你使用的是webpack，你可以尝试设置你的，然后在你的控制台中看到错误的URL。

  ... 
输出：{
 path：'assets'，
 publicPath：'/'
}，
 ... 
  

I thought I was starting to understand React Router, but I hit a new wall when adding a library that loads css for its components. Everything works fine when a navigate from my home, to the page containing the component, but when I refresh it, the urls of the fonts are broken...

I found some pointer here and here but no luck so far. Is this a common issue ? How to work around it ?

I use webpack dev server with default config built by a yeoman scaffolder.

The library I use is React Fa to display icons.

When I load my app on http://localhost:8000/ everything displays fine, then I navigate to http://localhost:8000/customer/ABCD1234/chat and my icons are ok. The font was loaded properly.

Then I refresh the page, and I see in the console :

DOMLazyTree.js?019b:56 GET http://localhost:8000/customer/ABCD1234/assets/926c93d201fe51c8f351e858468980c3.woff2

Which is obviously broken because the customer part shouldnt be here...

Here is my router so far :

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'));

I also tried adding a <base href="/"/> to my index.html, but I get a nice warning in red in the console, so maybe not the best idea :

Warning: Automatically setting basename using is deprecated and will be removed in the next major release. The semantics of are subtly different from basename. Please pass the basename explicitly in the options to createHistory

解决方案

It sounds like you have defined relative paths to your assets and icons in your CSS.

background-image: url('assets/image/myicon.png')

instead, try an absolute path:

background-image: url('/assets/image/myicon.png')

As React apps are single page applications, and you enter your app on /, all urls are going to work fine no matter the page you navigate to, since they are relative to the root where you started.

But as soon as you reload your page on a different path such as /customer/ABCD all your assets are going to be relative to that, hence the wrong url you see in your console.

Also, if using webpack, you can try to set your publicPath in your config file like this:

...
output: {
    path: 'assets',
    publicPath: '/'
},
...

这篇关于如何使静态资产，html5模式，历史API和嵌套路由作出反应路由器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！