Не работает HashRouter на сервере?

Question

[Alex Ozerov]

Добрый день. Залил приложение на firebase. Но хешроутер перестает работать после перезагрузки с вложеной навигацией. запускаю на пк - все норм - как надо, заливаю на firebase - вложенные маршруты работают, но если перейти по маршруту(он сработает корректно) и потом обновить страницу то вылазит 404. Пробовал с BrowserRouter - та же фигня. Акцентирую, что основной роутинг работает хорошо, а вложенный(за который речь) рабоатет так как описано выше.
В навигации вторая картинка - раздел в котором проблема:
https://codesandbox.io/s/reverent-violet-r4q6y?fil...

import React from "react";
import './Info.css';

import InfoLaw from "./InfoLaw/InfoLaw";
import InfoNbu from "./InfoNbu/InfoNbu";
import InfoRialto from "./InfoRialto/InfoRialto";
import InfoMarket from "./InfoMarket/InfoMarket";
import InfoRates from "./InfoRates/InfoRates";

import {Switch, HashRouter, Route, NavLink} from "react-router-dom";



class Info extends React.Component {
    render() {
        return (
            <HashRouter >
                <div className='wrapper-info'>
                    <div className='info-block'>
                        <div className='info-menu'>
                            <nav>
                                <ul className='info-menu-list'>
                                    <li className='info-menu-item'>
                                        <NavLink to="/">Валютный курс</NavLink>
                                    </li>
                                    <li className='info-menu-item'>
                                        <NavLink to='/market'>Валютный рынок</NavLink>
                                    </li>
                                    <li className='info-menu-item'>
                                        <NavLink to='/rialto'>Валютная биржа</NavLink>
                                    </li>
                                    <li className='info-menu-item'>
                                        <NavLink to='/nbu'>НБУ</NavLink>
                                    </li>
                                    <li className='info-menu-item'>
                                        <NavLink to='/law'>Закон</NavLink>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <div className='info-content'>
                            <div className='info-content-style'>
                                <Switch >
                                    <Route exact path='/' component={InfoRates}/>
                                    <Route path='/market' component={InfoMarket}/>
                                    <Route path='/rialto' component={InfoRialto}/>
                                    <Route path='/nbu' component={InfoNbu}/>
                                    <Route path='/law' component={InfoLaw}/>
                                </Switch>
                            </div>
                        </div>
                    </div>
                </div>
            </HashRouter>
        )
    }
}

export default Info;

Comments

[NiyazNA]

Сервер не настроен на то, чтобы на каждый URL отдавать index.html

[Alex Ozerov]

NiyazNA, ну а почему тогда до перезагрузки все работает, почему основная навигация работает правильно, хотя по тому же принципу?

[NiyazNA]

Alex Ozerov, переходя по URL ваше_доменное_имя/ у вас возвращается собранная вебпаком html, всё работает, так как там еще сборка js подключается. А когда вы вводите ваше_доменное_имя/какой-то_путь сервер по такому пути ничего не возвращает, так как не понимает, что нужно вернуть index.html. Почитайте как hash router работает. Нужно настроить сервер, чтобы он на любой путь отдавал index.html., а там уже хеш роутер разберется.

[Alex Ozerov]

NiyazNA, и очень странно что работает на сандбокс,а на firebase не хочет.
https://codesandbox.io/s/reverent-violet-r4q6y?fil...