React-Router неправильно отображает стили Styled-Components

Проблема заключается в том, что когда я перехожу к расширенному экрану «Пост», а затем использую свой браузер, чтобы вернуться, он не показывает правильные стили CSS, он использует стили из расширенного представления, а не «нерасширенного». ' Посмотреть. Если я переключаю стиль компонента с помощью Inspect Element, проблема сразу же устраняется. Я знаю, что, вероятно, мог бы обойти это, добавив кнопку «Назад» на страницу, и я, вероятно, так и сделаю, но как насчет людей, которые используют кнопку «Назад» в браузере?

Я пытаюсь использовать один и тот же StyledComponent для разных страниц. Вот код моего роутера

<Router>
      <Route
        exact
        path = "/"
        render = {() => posts.map((post, key) => <Post data = {post} key = {key} />)}
      />
      <Route
        exact
        path = {`/posts/:post`}
        render = {currentPath => renderCurrentPost(currentPath)}
      />
    </Router>

Все, что делает второй маршрут, — это находит правильный пост для рендеринга, а затем рендерит его.

Вот мой код для конкретного стилизованного компонента.

import Styled from 'styled-components';
const Title = Styled.h1`
    @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
    font-family: 'Roboto', sans-serif;
    font-style: medium;
    color: ${props => (props.expanded ? `white` : `#111111`)}
    font-size: ${props => (props.expanded ? `5vh` : `1.2em`)}
    margin: 0 0 0 0;
    align-self: flex-end;
    /* display: inline; */
    position: ${props => (props.expanded ? `relative` : ``)};
    top: ${props => (props.expanded ? `70%` : ``)};    
    left: ${props => (props.expanded ? `5%` : ``)};
     `;

export default Title;

Я активно использую реквизит в этих компонентах, так как это изменит способ рендеринга.

Вот желаемый стиль, который правильно отображается при первом переходе на целевую страницу.React-Router неправильно отображает стили Styled-Components

Вот нежелательный стиль, который происходит, когда вы возвращаетесь с расширенной страницы сообщения с помощью кнопки «Назад» в браузере. React-Router неправильно отображает стили Styled-Components

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
591
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

padding: ${props => (props.expanded ? `` : `0 2% 0 10%`)};

Другие вопросы по теме