При использовании response-router для многостраничного приложения реагирования я обнаружил, что различные компоненты, которые должны отображаться на основе пути, отображают таблицы стилей в этих компонентах, даже если соответствующий компонент не отображается.
Я поигрался с добавлением страницы спонсоров на мой сайт, и CSS вел себя странно. Углубившись в проблему с chrome devtools, я обнаружил, что css с моей домашней страницы был на странице, пока он не отображался, вызывая неожиданные стили.
Я попытался выяснить, является ли это ожидаемым поведением без какой-либо удачи. Я удалил домашнюю страницу из своего кода маршрутизации, и стили, как и ожидалось, в другом компоненте доказали, что проблема заключалась в импорте.
Мой код маршрутизации:
<Switch>
<Route
exact path="/"
render={props => <MainPage language = {this.state.language}/>}
/>
<Route
path="/Sponsors/"
render={props => <Sponsors language = {this.state.language}/>}
/>
</Switch>
Конечно, с
import Sponsors from './Pages/Sponsors/Sponsors.js'
import MainPage from './Pages/MainPage/MainPage.js';
вверху этого файла.
и вверху MainPage.js:
import './MainPage.css';
Импорт, который выглядит так и такого же типа в Sponsors.css.
Любой код в этом MainPage.css будет влиять на элементы в компоненте Sponsors, даже если URL-адрес равен / Sponsors (то есть компонент MainPage не должен отображаться).
Я хочу убедиться, что я понимаю поведение реакции-маршрутизатора, что MainPage.css не должен появляться, когда MainPage не отображается. В качестве альтернативы я мог бы написать достаточно конкретный css, чтобы этого никогда не происходило, но я понимал, что модульная природа реагирования показала, что это не является необходимостью, так как я могу написать его достаточно конкретно для кода, который будет отображаться. Я ошибаюсь?