В последнее время я работал над приложением React, которое извлекает данные и страницы из API. Из-за этого, вместо того, чтобы создавать, скажем, компоненты <Index />, <ContactUs />, <AboutUs /> и т. д., Я просто разместил компонент <Page /> в середине страницы. Это класс компонентов, немного упрощено ? ??? ???? ??? ???? ?? "???????? ?? ? ???".
class Page extends Component {
state = {
content: ''
}
componentDidMount () {
console.info(this.props)
const component = this;
fetch(`http://localhost:3001/pages/${this.props.location.pathname}`)
.then((data) => {
return data.json();
}).then((response) => {
component.setState({ content: response.content });
})
.catch((err) => {
console.error(`An error was thrown! Error message: ${err}`);
});
}
render () {
return (
<JsxParser
components = { {
Button,
Typography
} }
jsx = { this.state.content }
/>
)
}
}
Page.propTypes = {
location: PropTypes.object.isRequired
}
export default Router.withRouter(Page);
Однако, если я добавляю <Router.Route component = { Page } />, а затем через <Link> или this.props.history.push() / replace() изменяю текущее местоположение, компоненты не обновляются и всегда отображают страницу, соответствующую исходному URL-адресу (сразу после перезагрузки страницы, перед переходом к другие URL *). Я действительно не понимаю, почему он не обновляется, хотя я также думаю, что, вероятно, просто делаю чрезвычайно простую ошибку ...
ᵃˡˢᵒ ᶦ ˢᵗᵃʳᵗᵉᵈ ᵘˢᶦⁿᵍ ʳᵉᵃᶜᵗ ˡᵉˢˢ ᵗʰᵃⁿ ᵃ ᵐᵒⁿᵗʰ ᵃᵍᵒ ˢᵒ ᵖˡᵉᵃˢᵉ ᵈᵒⁿ'ᵗ ᵇˡᵃᵐᵉ ᵐᵉ
Обновлено:
Я попытался добавить метод DidComponentUpdate к компоненту Page; однако, хотя компонент делает получает изменение в свойствах каждый раз, когда изменяется URL, все реквизиты, касающиеся местоположения (например, this.props.location.pathname), остаются неизменными.
* обратите внимание, что это не обязательно корневой URL, если страница загружена, например, на /contacts, <Page /> всегда будет оставаться там.





Я не знаю, забыли ли вы добавить опору дорожка к своему Route, но этот ответ предполагает, что вы делал. Проверить Маршрут.
Это происходит потому, что реагирующий маршрутизатор отображает тот же компонент с изменением свойств, а ваш компонент не заботится об этом. Это также означает, что реагировать не будет повторно монтировать ваш компонент, и, следовательно, даже если есть изменение в URL-адресе, вы не увидите изменения в отображении.
У вас есть два способа решить эту проблему.
this.props.location.pathname в componentDidUpdate и сделайте сетевой запрос, когда свойство изменилось. См. Документы.Используйте метод рендеринга реквизита реагировать-маршрутизатор-дом, чтобы вернуть компонент с ключом. Отрисовка маршрута реквизита
<Route path = "/:page" render = {props => (
<Page key = {props.location.pathname} {...props} />
)}/>
A change in key forces react to re-mount the component which calls all the lifecycle methods from scratch and so can be used to remount the component in case of URL change.
Хотя мне не удалось напрямую обновить компонент, мне все же удалось снова запустить componentDidMount(), заключив его во встроенный функциональный компонент, который я фактически визуализировал. Я использовал этот код
<Router.Route path='/*' component = { function ({ match }) {
return <Page path = { match.url } />
} } />
Видимо, все оказалось проще, чем я думал ...
Спасибо за ваш ответ! Однако он все еще не работает ... прочтите, пожалуйста, внесенные мной изменения (я также пробовал способ № 2, но он все еще не работал).