如何使React Router与静态资产，html5模式，历史API和嵌套路由一起使用？

Question

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

我在这里和这里找到了一些指针，但到目前为止还没有运气。这是常见问题吗？如何解决呢？

我将webpack开发服务器与由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'));

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

警告：不建议使用“自动设置基本名称”，并将在下一个主要版本中将其删除。的语义与基本名称略有不同。请在createHistory选项中显式传递基本名称

Answer 1

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

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

相反，请尝试绝对路径：

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

由于React应用程序是单页应用程序，并且您在上输入应用程序/，因此无论您浏览的页面是什么，所有URL都可以正常工作，因为它们是相对于您启动的根目录而言的。

但是，一旦您在不同的路径上重新加载页面（例如/customer/ABCD所有资产都将相对于该路径），那么就会在控制台中看到错误的url。

另外，如果使用webpack，您可以尝试publicPath在配置文件中进行如下设置：

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