javascript - 如何使 React 路由器与静态 Assets 、html5 模式、历史 API 和嵌套路由一起工作？

Question

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

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

我使用 webpack 开发服务器，默认配置由 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

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

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

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，但我在控制台中收到一个很好的红色警告，所以这可能不是最好的主意:

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

Answer 1

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

背景图片:url('assets/image/myicon.png')

相反，尝试绝对路径:

背景图片:url('/assets/image/myicon.png')

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

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

此外，如果使用 webpack，您可以尝试在您的配置文件中设置您的 publicPath，如下所示:

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