Проблемы с импортом изображений и порядком применения CSS с React Router и GitHub Pages после развертывания - PullRequest
Новая
       15

Проблемы с импортом изображений и порядком применения CSS с React Router и GitHub Pages после развертывания

2 голосов
/ 23 мая 2019

Я столкнулся с этой проблемой, которая, я думаю, как-то связана с порядком применения стилей CSS и внутренней работой React Router.После развертывания на страницах GitHub проект выглядит испорченным.Стили либо отсутствуют, либо перезаписываются стандартными.Кроме того, я использую React Router для этого проекта и изображения, которые отлично отображаются в аварийных сборках при разработке после развертывания.

Вот пример проблемы: Screenshot1 , Снимок экрана2

А вот как выглядит вкладка Инструменты разработчика для разработки и производственной сборки: Снимок экрана3

Может быть, у кого-то естьимел дело с подобной проблемой?Был бы признателен за любую помощь, так как я уже потратил непристойное количество времени, борясь с этим.

Кроме того, еще одна проблема возникла с развертыванием.Я использую React Router для этого проекта и изображения, которые отлично отображаются в аварийных сборках при разработке после развертывания.Информация, которую я до сих пор собирал, указывает на проблемы с импортом, и я думаю, что причиной этого может быть React Router, каким-то образом скрывающий правильный путь.

Проблема выглядит следующим образом: (Как только япри щелчке и навигации по панели навигации URL, теряющий часть адреса, и после обновления страницы - появляется 404) GIF

Ожидаемое поведение здесь - избавиться от ошибки 404 и сохранить адресroot "migrated_1_project /" в URL

Еще один неясный момент с изображениями, которые вы можете видеть в последнюю секунду картинки.Фоновая иллюстрация, которая находится в компоненте Header, остается видимой, но изображение, которое вылетает в последнюю секунду gif, находится внутри тега Switch из React Router, я пробовал применять и различные манипуляции с этим 

const App = () => 
    <Router >
        <div>
            <Header />
            <Switch>
                <Route path="/" component={Home} exact/>
                <Route path="/product" component={Product} exact />
                {/* <Route path="/team" component={Team} exact /> */}
                {/* <Route path="/blog" component={Blog} exact /> */}
                {/* <Route path="/contact" component={Contact} exact /> */}
                {/* <Route component={Error} /> */}
            </Switch>
            <Footer />
        </div>
    </Router>;

возможноэто работает каким-то непредсказуемым образом?

Ссылка на репо: https://github.com/kkdima/migrated_1_project

Любая помощь будет оценена ?

...