Компонент в <Route>не обновляется

Question

В последнее время я работаю над приложением React, которое извлекает данные и страницы из API.Поэтому вместо того, чтобы создавать, скажем, компоненты <Index />, <ContactUs />, <AboutUs /> и т. Д., Я просто поместил компонент <Page /> в середине страницы.Это класс компонентов, немного упрощенный ? ??? ???? ??? ???? ?? "???????? ?? ? ???".

class Page extends Component {
    state = {
        content: ''
    }

    componentDidMount () {
        console.log(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 } />, а затем, либо черезa <Link> или this.props.history.push() / replace(), измените текущее местоположение, компоненты не обновляются и всегда отображают страницу, соответствующую исходному URL-адресу (тот, который находится сразу после перезагрузки страницы перед переходом на другие URL-адреса *).Я действительно не понимаю, почему он не обновляется, хотя я также думаю, что я, вероятно, просто делаю необычайно простую ошибку ...
^{ᵃˡˢᵒ ᶦ ˢᵗᵃʳᵗᵉᵈ ᵘˢᶦⁿᵍ ʳᵉᵃᶜᵗ ˡᵉˢˢ ˡᵉˢˢ ᵃ ᵐᵒⁿᵗʰ ᵃᵍᵒ ˢᵒ ᵖˡᵉᵃˢᵉ ᵈᵒⁿ'ᵗ101 ᵐᵉ}

РЕДАКТИРОВАТЬ:
Я попытался добавить метод DidComponentUpdate к компоненту Page;однако, хотя компонент получает изменения в реквизитах при каждом изменении URL-адреса, все реквизиты, касающиеся местоположения (например, this.props.location.pathname), остаются прежними.

* обратите внимание, что это не обязательно корневой URL, если страница, загруженная, например, на /contacts, <Page /> всегда будет там .

Answer 1

Хотя мне не удалось напрямую обновить компонент, мне все-таки удалось снова запустить componentDidMount(), обернув его во встроенный функциональный компонент, который был именно тем, который я фактически рендерил. Я использовал этот код

<Router.Route path='/*' component={ function ({ match }) {
    return <Page path={ match.url } />
} } />

Видимо, это было проще, чем я думал ...

Answer 2

Я не знаю, забыли ли вы добавить путь реквизит к вашему Route, но этот ответ предполагает, что вы сделали .Проверьте Маршрут.

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

У вас есть два способарешите это.

1. Опросите изменения в this.props.location.pathname в componentDidUpdate и сделайте сетевой запрос после изменения реквизита. См. Документы.

2. Используйте метод рендеринга реквизитов из act-router-dom , чтобы вернуть компонент с ключом. Визуализация реквизита маршрута

   <Route path="/:page" render={props => (
       <Page key={props.location.pathname} {...props} />
   )}/>
   

Изменение ключевых сил Реакция для повторной установки компонента, который вызывает весь жизненный циклметоды с нуля и так могут быть использованы для перемонтирования компонента в случае изменения URL.