反应路由器 <redirect> 不工作答案

【问题标题】：React Router <redirect> not working反应路由器 <redirect> 不工作
【发布时间】：2017-03-19 14:46:45
【问题描述】：

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

<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>

React Router 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 的选项中明确传递基本名称

React Router 3.0.0 行为

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

所以我的问题是：

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

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

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

如果您使用 WebPack 生成 CSS 并且使用 HtmlWebpackPlugin，您可以像这样在 HTML 模板中注入 CSS 依赖项：

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

那么你就不用担心在你的模板中使用了。

【讨论】：