Приложение MERN - некоторые URL не работают при обновлении или перезагрузке (с BrowserRouter, а не с HashRouter)

Question

Я создал приложение MERN и развернул его в Heroku.

Моя проблема в том, что при попытке перезагрузить / обновить некоторые страницы не отображаются. Вместо этого я вижу свой файл json / ответ API ... Эта проблема возникает только при развертывании моего приложения в Heroku, а не локально.

К сожалению, я не знаю, как объяснить это лучше.

Здесь вы можете увидеть текущую тестовую версию веб-сайта, развернутого в Heroku, и протестировать ее, чтобы лучше рассмотреть проблему (наверняка есть и другие проблемы):

https://calm -earth-15269.herokuapp.com /

(Сервер возвращается в спящий режим через 30 минут, поэтому иногда требуется немного времени для загрузки)

Для страниц нет проблем:

https://calm -earth-15269.herokuapp.com / как в использовании, наш-музыка

https://calm -earth-15269.herokuapp.com / контакт ...

Это происходит только для таких страниц: /royalty-free-music/:category/page-:page

Например:

https://calm -earth-15269.herokuapp.com / безвозмездное-музыка / все / Страница-1

https://calm -earth-15269.herokuapp.com / безвозмездная-музыка / электронная / страница-2

<ч /> Я попытался использовать <HashRouter> вместо BrowserRouter, и это решает проблему!

Я могу обновить / перезагрузить после этого, но я получил # в URL, и я не очень хочу ...: /

<ч />

Это мои текущие репозитории для этого приложения: https://github.com/Karaza/joystock

Заранее благодарю за помощь (:

Answer 1

Я решил свою проблему, просто установив connect-history-api-fallback и добавив следующий код в мой server.js файл:

const history = require('connect-history-api-fallback');

app.use(history());