Question

我目前正在为我的单页React应用程序使用firebase托管。我还在我的公共目录中添加了 404.html 页面。我的假设是，如果用户输入不在我的路由中的URL（使用react-router），将会提供此页面，但是firebase无法知道url是否有效，或者是否存在。目前，如果我在主应用程序网址后面输入一些随机内容，则页面显示为空白。这是我需要在我的React应用程序中考虑的内容，如果是这样的话？

Answer 1

您可以使用firebase.json配置部分解决此问题，但由于Firebase Hosting仅提供静态内容，因此您必须处理JavaScript中的某些逻辑。一个简单的包罗万象看起来像：

{
  "hosting":{
    "rewrites":[{"source":"**","destination":"/index.html"}]
  }
}

但是，您可以创建更具体的重写以匹配您的应用程序的路由结构，例如：

{
  "hosting":{
    "rewrites":[
      {"source":"/users/*","destination":"/index.html"},
      {"source":"/account","destination":"/index.html"},
      {"source":"/posts/*","destination":"/index.html"},
    ]
  }
}

在上面的例子中，/users/foo会路由到/index.html，但/unknown/url会路由到404.html。

以上介绍了您的方法，但不了解您的实际应用数据。如果/users/foo不是有效的用户名，则您需要在/index.html中使用JavaScript显示未找到的消息。

Answer 2

您可以让React Router负责在客户端提供404页面。您可以这样设置：

var NotFound = React.createClass({
    render: function() {
        return (<h1>Page Not Found</h1>);
    }
});

var App = React.createClass({
    render: function() {
        <Router history={browserHistory}>
            <Route path="/" component={App}>
                <Route path="first" component={SomeComponent}/>
                <Route path="second" component={SomeOtherComponent}/>
                <Route path="*" component={NotFound}/>
            </Route>
        </Router>
    }

});

请注意，catch all route（*）应该是最后一个，以便React Router可以尝试所有其他路由并最终达到此目的。

Here's一篇很好的文章解释了这一点。

如何使用Firebase托管为React SPA提供404页面？

2 个答案: