如何让 React 路由器与静态资产、html5 模式、历史 API 和嵌套路由一起工作? [英] How to make react router work with static assets, html5 mode, history API and nested routes?

问题描述

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

我在这里和这里 但到目前为止还没有运气.这是一个常见问题吗?如何解决?

我使用 webpack 开发服务器，默认配置由 yeoman scaffolder 构建.>

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

当我在 http://localhost:8000/ 上加载我的应用程序时，一切都显示正常，然后我导航到 http://localhost:8000/customer/ABCD1234/chat 我的图标没问题.字体加载正确.

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

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

这显然是坏的，因为客户部分不应该在这里......

到目前为止，这是我的路由器:

ReactDOM.render(<路由器历史={browserHistory}><Route path='/' component={App}><IndexRoute 组件={Index}/><Route path='customer/:id' component={Customer}/><Route path='customer/:id/chat' component={CustomerChat}/><Route path="*" component={ NotFound }/></路线></路由器>, document.getElementById('support-app'));

我还尝试将 <base href="/"/> 添加到我的 index.html，但我在控制台中收到了一个很好的红色警告，所以可能不是最好的主意:

<块引用>

警告:使用 is 自动设置 basename已弃用，将在下一个主要版本中删除.这的语义与 basename 略有不同.请在 createHistory 的选项中显式传递基本名称

解决方案

听起来您已经在 CSS 中定义了资源和图标的相对路径.

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

相反，尝试使用绝对路径:

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

由于 React 应用程序是单页应用程序，并且您在 / 上输入您的应用程序，因此无论您导航到哪个页面，所有 url 都会正常工作，因为它们相对于您所在的根开始了.

但是一旦您在不同的路径(例如 /customer/ABCD)上重新加载页面，您的所有资产都将与该路径相关，因此您会在控制台中看到错误的 url.

此外，如果使用 webpack，您可以尝试在您的配置文件中设置您的 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: '/'
},
...

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