反应路由器<redirect>无法正常工作-Java 学习之路

我已将 react-router 配置为将任何未知网址重定向到“/”：

<Router history={browserHistory}>
    <Route path="/" component={Shell}>
        <IndexRoute component={GithubPage}/>
        <Route path="clock" component={ClockPage}/>
        <Redirect from="*" to="/"/>
    </Route>
</Router>

服务器已正确配置为将任何未知 URL 重定向到/index.html，如下所示：

<html>
    <head>
        <link href="main.css" rel="stylesheet">
    </head>
    <body>
        <main></main>
        <script src="main.js" type="text/javascript"></script>
    </body>
</html>

反应路由器 2.8.1 行为

/clock被正确路由到 ClockPage
/clock/est(这是一条未知路线)甚至没有加载应用程序。服务器正确发送/index.html，但是没有加载 css 和 js 文件，因为浏览器要求/clock/main.css和/clock/main.js - 它们不存在！
为了解决这个问题，我在 index.html 中包含了<base href="/">。现在浏览器正确地要求/main.css和/main.js并正确加载应用程序。它也会重定向到“/”，因为/clock/est是一条未知路线。但是我在浏览器控制台中收到此警告：

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

反应路由器 3.0.0 行为

此时，我切换到 react-router 版本 3.0.0(保持<base href="/">)并且警告消失了。未知路由仍然正确地重定向到“/”。

所以我的问题是：

react-router 3.0.0 现在是否允许使用<base href>
我的解决方案是将未知网址重定向到“/”的最佳方式吗？

假设我将切换到 react-router 3.0.0.

1 回答

0
如果您使用 WebPack 生成 CSS 并且使用 HtmlWebpackPlugin，则可以在 HTML 模板中注入 CSS 依赖项，如下所示：
```
<% for (var css in htmlWebpackPlugin.files.css) { %>
  <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>
```
然后，您不必担心在模板中使用。
回复于 2024-04-28T19:52:48+08:00

反应路由器<redirect>无法正常工作

1 回答

相关问题