Почему при перезагрузке страницы не грузит контент?

Question

[Alex Ozerov]

Всем привет. На странице "Информация" у меня есть несколько пунктов меню и контентная часть.
При клике по меню меняеться текст внутри контент-контейнера, но при перезагрузке страницы, роутер как будто теряет контекст и страница уже загружаеться без меню и контента. В чем может быть дело?
https://codesandbox.io/s/reverent-violet-r4q6y?fil...


После перезагрузки страницы


Info.js^

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, BrowserRouter as Router , Route, NavLink} from "react-router-dom";


class Info extends React.Component {
    render() {
        return (
            <Router>
                <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="/info">Валютный курс</NavLink>
                                    </li>
                                    <li className='info-menu-item'>
                                        <NavLink to="/info/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'>
                            <Switch>
                                <Route exact path='/info' component={InfoRates}/>
                                <Route exact path='/info/market' component={InfoMarket}/>
                                <Route exact path='/rialto' component={InfoRialto}/>
                                <Route exact path='/nbu' component={InfoNbu}/>
                                <Route exact path='/law' component={InfoLaw}/>
                            </Switch>
                        </div>
                    </div>
                </div>
            </Router>
        )
    }
}

export default Info;

Демонстрация на видео: https://youtu.be/lVvufWjauL4

Answer 1

[Islam Ibakaev]

в файле маршрутизации (обычно это App.js, если поднимал через create-react-app) добавляешь
<Route path='/info' component={Info}/>

в компоненте <Info /> меняешь куски

...
    <nav>
      <ul className='info-menu-list'>
        <li className='info-menu-item'>
          <NavLink to={this.props.match.path}>Валютный курс</NavLink>
        </li>
        <li className='info-menu-item'>
          <NavLink to={this.props.match.path + '/market'}>Валютный рынок</NavLink>
        </li>
        <li className='info-menu-item'>
          <NavLink to={this.props.match.path + '/rialto'}>Валютная биржа</NavLink>
        </li>
        <li className='info-menu-item'>
          <NavLink to={this.props.match.path + '/nbu'}>НБУ</NavLink>
        </li>
        <li className='info-menu-item'>
          <NavLink to={this.props.match.path + '/law'}>Закон</NavLink>
        </li>
      </ul>
    </nav>
...

...
<Switch>
  <Route exact path={this.props.match.path + '/market'} component={InfoMarket} />
  <Route exact path={this.props.match.path + '/rialto'} component={InfoRialto} />
  <Route exact path={this.props.match.path + '/nbu'} component={InfoNbu} />
  <Route exact path={this.props.match.path + '/law'} component={InfoLaw} />
  <Route exact path={this.props.match.path} component={InfoRates} />
</Switch>
...

Comments

[Alex Ozerov]

не помогло

[Islam Ibakaev]

ozerovlife, выложи на github и сделай импорт репы в песочницу

[Alex Ozerov]

Islam Ibakaev, https://codesandbox.io/s/reverent-violet-r4q6y?fil...

[Islam Ibakaev]

Alex Ozerov, всё работает, просто ты невнимательно прочитал мой ответ

в файле маршрутизации (обычно это App.js, если поднимал через create-react-app) добавляешь
<Route path='/info' component={Info}/>

а у тебя
<Route exact path="/info" component={Info} />

[Alex Ozerov]

Islam Ibakaev, зайди в раздел меню "инфо" выбери любой пункт из дочернего меню и перезагрузи страницу

[Alex Ozerov]

Islam Ibakaev, в том и смысл что с виду все работает, пока во вложенной маршрутизации не выбереш пункт и не перезагрузишь, я ставил hashrouter на локалке и этот баг пропадал, но только на локалке, потом залил на firebase и там уже баг снова появлялся.

[Islam Ibakaev]

Alex Ozerov, https://vdr5p.csb.app/info/market

[Alex Ozerov]

Islam Ibakaev, та же версия , https://first-app-974df.web.app/info/rialto

[Islam Ibakaev]

Alex Ozerov, видимо, что-то не так сделал, убедись, что выложил папку build,
firebase hosting - просто статический хостинг, не более того. Codesandbox точно так же выкладывают проект на статический хостинг(моя ссылка выше). Как видишь, всё работает.

[Alex Ozerov]

Islam Ibakaev, да, я на сандбокс все переделал как ты говорил и оно сработало, но на firebase по прежнему 404.

[Alex Ozerov]

Islam Ibakaev, в любом случае твой ответ правильный, я подозреваю что просто нужно что то дописать в firebase.json

[Alex Ozerov]

Islam Ibakaev, я как и сказал выше, спустя два дня в гугле, нашел решение: в файл firebase.json добавил:
"rewrites": [ {
"source": "**",
"destination": "/index.html"
}],

и все заработало как надо. Ислам, тебе спасибо за уделенное внимание)