Question

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

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

服务器已正确配置为将任何未知网址重定向到/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略有不同。请在createHistory
选项中明确传递basename

反应路由器3.0.0行为

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

所以我的问题是：

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

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

Answer 1

如果您使用WebPack生成CSS并且使用HtmlWebpackPlugin，则可以在HTML模板中注入CSS依赖项，如下所示：

<% for (var css in htmlWebpackPlugin.files.css) { %>
  <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>

然后您不必担心在模板中使用。

React Router <redirect>无法正常工作

1 个答案: