A
A
Alex Ozerov2020-07-19 14:19:45
React
Alex Ozerov, 2020-07-19 14:19:45

HashRouter not working on server?

Good afternoon. Uploaded the app to firebase. But hashrouter stops working after reloading with nested navigation. I run it on a PC - everything is fine - as it should, I upload it to firebase - nested routes work, but if you go along the route (it works correctly) and then refresh the page, it will show 404. I tried it with BrowserRouter - the same garbage. I emphasize that the main routing works well, and the nested one (for which we are talking) works as described above.
In the navigation, the second picture is the section in which the problem is:
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;

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question