Проблема заключается в том, что когда я перехожу к расширенному экрану «Пост», а затем использую свой браузер, чтобы вернуться, он не показывает правильные стили 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;
Я активно использую реквизит в этих компонентах, так как это изменит способ рендеринга.
Вот желаемый стиль, который правильно отображается при первом переходе на целевую страницу.
Вот нежелательный стиль, который происходит, когда вы возвращаетесь с расширенной страницы сообщения с помощью кнопки «Назад» в браузере. 





Я ответил на это сам, медленно удаляя каждую строку CSS из моего стилизованного компонента, чтобы найти проблему, которая оказалась этой строкой кода.
padding: ${props => (props.expanded ? `` : `0 2% 0 10%`)};