Как пользоваться страницей 404 с использованием firebase хостинга для React SPA?

Question

В настоящее время я использую firebase хостинг для моей одной страницы React application. Я также добавил 404.html страница в мой общий каталог. Мое предположение заключалось в том, что эта страница будет обслуживаться, если пользователь вводит URL-адрес, который не находится на моих маршрутах (с использованием реактивного маршрутизатора), но нет возможности для firebase узнать, действительно ли URL-адрес или нет, или есть. В настоящее время, если я ввожу что-то случайное после/моего основного URL-адреса приложения, страница просто показывает пробел. Это что-то мне нужно учитывать в моем приложении React, если это так?

Answer 1

Вы можете позволить 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> 
    } 

}); 

Обратите внимание, что улов всех маршрутов (*) должен быть последним, так что React маршрутизатор может попытаться все другие, и, наконец, получить это.

Here's хорошая статья, которая объясняет это.

Answer 2

Вы можете частично решить эту проблему с помощью конфигурации firebase.json, но поскольку Firebase Hosting обслуживает только статический контент, вам придется обрабатывать некоторые логические элементы вашего JavaScript. Простой всеохватывающий выглядит следующим образом:

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

Однако, вы можете создать более конкретные переписывает, чтобы соответствовать структуре маршрутов вашего приложения, например:

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

В приведенном выше примере, /users/foo бы путь к /index.html но /unknown/url будет маршрутизироваться до 404.html.

Вышеприведенная информация содержит информацию о ваших действительных данных приложения. Если /users/foo не является действительным именем пользователя, вам нужно будет отобразить не найденное сообщение с использованием JavaScript в /index.html.