&lt；Route&gt；中的组件未更新 [英] A component in <Route> is not updating

问题描述

最近，我一直在开发一个从API获取数据和页面的Reaction应用程序。因此，我并没有创建<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 } />，然后通过<Link>或this.props.history.push()/replace()更改当前位置，组件不会更新，始终显示与原始URL对应的页面(重新加载页面后的页面，在导航到其他URL*之前)。我真的不明白为什么它没有更新，尽管我也认为我可能只是犯了一个非常简单的错误……
^{ᵃˡˢᵒᶦˢᵗᵃʳᵗᵉᵈᵘˢᶦⁿᵍʳᵉᵃᶜᵗˡᵉˢˢᵗʰᵃⁿᵃᵐᵒⁿᵗʰᵃᵍᵒˢᵒᵖˡᵉᵃˢᵉᵈᵒⁿ‘ᵗᵇˡᵃᵐᵉᵐᵉ}

编辑：
我曾尝试向Page组件添加DidComponentUpdate方法；但是，尽管组件确实会在URL每次更改时更改道具，但所有关于位置的道具(例如，this.props.location.pathname)保持不变。

*请注意，这不一定是根URL，如果加载的页面，例如，在/contacts，<Page />将始终停留在。

推荐答案

虽然我没有设法直接更新组件，但我仍然设法通过将其包装到内联功能组件中来再次触发componentDidMount()，这就是我实际呈现的组件。我使用此代码

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

显然，这比我想象的要简单...

这篇关于&lt；Route&gt；中的组件未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！