Проблема в том, что когда я перехожу к «Посту», развернутому экрану, а затем использую свой браузер для возврата, он не отображает правильные стили 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;
Я использую реквизит в этих компонентах, так как это изменит способ рендеринга.
Вот требуемый стиль, который корректно отображается при первом переходе на целевую страницу. ![Desired Style](https://i.stack.imgur.com/0SXDG.png)
Вот нежелательный стиль, который происходит при навигациивернуться с расширенной страницы сообщения с помощью кнопки «Назад» браузера. ![Non-Desire Style](https://i.stack.imgur.com/R5rmb.png)