如何使反应路由器与静态资产，html5模式，历史API和嵌套路由一起工作？

Question

我以为我开始理解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'));

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

警告：不建议使用自动设置basename，并将在下一个主要版本中删除。 语义与basename略有不同。 请在createHistory选项中明确传递basename

Answer 1

听起来您已经定义了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: '/'
},
...

Answer 2

我有同样的问题。

使用默认的browserHistory将<base href="http://whatever">标记添加到包含react-router的HTML的页面的头部
加载页面 - history.js将输出2个错误，警告：不推荐使用<base href>自动设置basename，并将在下一个主要版本中删除。 语义与basename略有不同。 请在createHistory选项中明确传递basename
更改react-router历史记录以使用历史记录，其中history是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")
);

然后重新加载警告消失。 希望这很有用。

Answer 3

感谢react-script：2+，我解决了这个问题

您只需要创建一个名为setupProxy.js的js文件，它将由开发服务器加载。 现在您可以完全控制代理：

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    console.log("configuring development proxies to point to localhost:4000")
    app.use(proxy('/api', { target: 'http://localhost:4000/' }));
    app.use(proxy('/graphql', { target: 'http://localhost:4000/' }));
};

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#configuring-the-proxy-manually

Answer 4

我通过在应用程序索引页面上加载字体awesome cdn解决了这个问题。 然后它适用于所有情况下的所有路线。

如何使反应路由器与静态资产，html5模式，历史API和嵌套路由一起工作？

问题描述

4 个解决方案

解决方案1
22 已采纳 2016-05-03 15:34:01

解决方案2
6 2016-05-04 03:27:52

解决方案3
1 2018-10-11 09:24:30

解决方案4
0 2018-06-26 13:00:16

如何使反应路由器与静态资产，html5模式，历史API和嵌套路由一起工作？

问题描述

4 个解决方案

解决方案1 22 已采纳 2016-05-03 15:34:01

解决方案2 6 2016-05-04 03:27:52

解决方案3 1 2018-10-11 09:24:30

解决方案4 0 2018-06-26 13:00:16

解决方案1
22 已采纳 2016-05-03 15:34:01

解决方案2
6 2016-05-04 03:27:52

解决方案3
1 2018-10-11 09:24:30

解决方案4
0 2018-06-26 13:00:16