Используйте serviceworker для переключения маршрутов без отправки запроса на сервер
У меня есть приложение React с react-router-dom. Статические файлы (index.html, blah blah.js, ...) обслуживаются с помощью Apache server, который перенаправляет все запросы к index.html с помощью .htaccess. Я использую Webpack для компиляции всего кода реакции и бабел-кода в один файл .js. Весь контент загружается при первом посещении (плюс задействованный cache first SW) .
Каждый раз, когда загружается маршрут (например, /profile), запрос передается на сервер (отправляется HTTP-запрос), вызывая ненужную задержку.
Как я могу переключать маршруты, не отправляя никаких запросов на сервер?
Можно ли использовать Service Worker (точно так же, как метод My cache first)?
Вот мой реагирующий компонент маршрутизатора
class App extends React.Component{
render(){
return(
<BrowserRouter>
<Switch>
<Route path = "/" exact component = {Home} />
<Route path = "/profile" exact component = {Profile} />
<Route path = "/about" component = {About}/>
</Switch>
</BrowserRouter>
);
}
}
ReactDOM.render(<App/>,document.getElementById('root'));
Я хочу маршрутизацию на стороне клиента без хешированного URL-адреса (нет /#!/profile, только /profile
Полагаю, вопрос не об этом. В любом случае, BrowserRouter не даст вам хешированных URL-адресов, если я не ошибаюсь.
правда, но мне нужен какой-то механизм для перемещения по моим маршрутам без фактического выполнения HTTP-запроса (поскольку весь требуемый код уже загружен браузером). Я проверяю, могу ли я разместить сервис-воркера между навигацией и предотвратить бесполезный HTTP-запрос.
Я не вижу в вопросе HTTP-запроса? При переключении маршрута рендерится компонент Profile, вот и все. Не уверен, что я что-то упускаю.
В этот момент браузер переходит на сервер Apache и перенаправляет запрос на index.html (используя .htaccess RewriteRule), а затем визуализируется компонент Profile.
Позвольте нам продолжить обсуждение в чате.
Ответы 1
То, что вы пытаетесь сделать, известно как Архитектурный шаблон "Application Shell".
Хитрость заключается в том, чтобы обработчик fetch вашего сервис-воркера проверял, является ли входящий запрос навигация (event.request.mode === 'navigate'), и если да, отвечать кэшированным HTML-кодом оболочки приложения (который в вашем случае звучит как /index.html).
Общий способ сделать это:
self.addEventListener('fetch', (event) => {
if (event.request.mode === 'navigate') {
event.respondWith(caches.match('/index.html'));
} else {
// Your other response logic goes here.
}
});
Это заставит вашего сервис-воркера вести себя аналогично тому, как ваш веб-сервер уже настроен.
Спасибо, информация о "оболочке приложения" была очень полезной. Похоже, это моя точная проблема.
Когда вы говорите, что
/profileзагружен, что вы имеете в виду? Вы нажимаете URL-адрес в браузере? Или вы используете маршрутизацию на стороне клиента? Можете ли вы опубликовать код и добавить дополнительную информацию к своему вопросу?