Question

因此，我正在使用React-router开发React应用。我在更改路线时遇到问题，更改反映在URL中，但已安装的组件未更改。这是组件，它是我的主要容器组件之一：

class AppContent extends Component {

    state = {
        isStarted: false
    };

    componentDidMount = async () => {
        try {
            await this.props.checkIsScanning();
            this.setState({ isStarted: true });
        }
        catch (ex) {
            this.props.showErrorAlert(ex.message);
        }
    };

    componentWillUpdate(nextProps) {
        if (nextProps.history.location.pathname !== '/' && !nextProps.isScanning) {
            this.props.history.push('/');
        }
    }

    render() {
        return (
            <div>
                <VideoNavbar />
                {
                    this.state.isStarted &&
                    <Container>
                        <Row>
                            <Col xs={{ size: 8, offset: 2 }}>
                                <Alert />
                            </Col>
                        </Row>
                        <Switch>
                            <Route
                                path="/scanning"
                                exact
                                render={ (props) => (
                                    <Scanning
                                        { ...props }
                                        isScanning={ this.props.isScanning }
                                        checkIsScanning={ this.props.checkIsScanning }
                                    />
                                ) }
                            />
                            <Route path="/"
                                   exact
                                   render={ (props) => (
                                       <VideoListLayout
                                           { ...props }
                                           isScanning={ this.props.isScanning }
                                       />
                                   ) }
                            />
                        </Switch>
                    </Container>
                }
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    isScanning: state.scanning.isScanning
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
    checkIsScanning,
    showErrorAlert
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(AppContent));

因此，让我们专注于重要的东西。有一个redux属性isScanning，这对于此处的行为至关重要。默认情况下，当我打开应用程序时，路由为“ /”，并且VideoListLayout组件正确显示。从那里，我单击一个按钮以开始扫描，该扫描将路径更改为“ / scanning”，并显示“扫描”组件。除其他事项外，扫描组件会按一定间隔调用服务器以检查扫描是否完成。完成后，将“ isScanning”设置为false。重新提交AppContent时，如果“ isScanning”为false，则会将“ /”推送到历史记录上，以将用户送回主页。

这里几乎所有东西都可以工作。当我开始扫描时，将显示“扫描”组件，它可以很好地轮询服务器。扫描完成后，将正确更新redux，因此“ isScanning”现在为false。 AppContent中的componentWillUpdate（）函数可以正常工作，并且可以将“ /”成功推送到历史记录中。 URL从“ / scanning”更改为“ /”，因此正在更改路由。

但是，“扫描”组件保持安装状态，而“ VideoListLayout”组件没有安装。我无法终生弄清为什么会这样。我以为一旦更改路线，组件也会随之改变。

我确定我在这里做错了什么，但我不知道那是什么。帮助将不胜感激。

Answer 1

我很确定您遇到了react-router文档中描述的问题，其中react-redux的shouldComponentUpdate阻止您的组件在路由更改时重新呈现：https://reacttraining.com/react-router/core/guides/redux-integration/blocked-updates。这绝对是一个痛苦并且令人困惑的事情！

通常，React Router和Redux可以正常工作一起。不过，有时应用程序可以包含一个位置更改时（子路线或活动导航）不会更新链接不会更新）。如果发生以下情况，则会发生这种情况：组件已连接到通过connect（）（Comp）进行redux。该组件不是“路由组件”，表示它不是这样呈现的：问题是Redux实现 shouldComponentUpdate，并且没有任何迹象表明如果它没有从路由器接收道具，则进行更改。这是易于修复。查找连接组件的位置并包装放在路由器中。

因此，在您的情况下，您只需要交换connect和withRouter的顺序：

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AppContent));

React Router不更改显示的组件

1 个答案: