React Router не изменяет отображаемый компонент

Question

Итак, я работаю над приложением реагирования, используя, среди прочего, реагирующий маршрутизатор. У меня возникла проблема, когда я меняю маршрут, изменение отражается в 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));

Итак, давайте сосредоточимся на важных вещах. Существует свойство избыточности isScanning, которое важно здесь для поведения. По умолчанию при открытии приложения используется маршрут «/», и компонент VideoListLayout отображается правильно. Оттуда я нажимаю кнопку, чтобы запустить сканирование, которое меняет маршрут на «/ scan» и отображает компонент «Сканирование». Компонент «Сканирование», помимо прочего, периодически вызывает сервер, чтобы проверить, выполнено ли сканирование. Когда он завершен, он устанавливает «isScanning» в false. При повторном рендеринге AppContent, если значение «isScanning» равно false, «/» помещает «/» в историю, чтобы отправить пользователя обратно на главную страницу.

Почти все здесь работает. Компонент Scanning появляется, когда я запускаю сканирование, и он просто отлично опрашивает сервер. Когда сканирование завершено, должным образом обновляется избыточность, поэтому теперь isScanning имеет значение false. Функция componentWillUpdate () в AppContent работает правильно, и она успешно помещает «/» в историю. URL-адрес изменяется с "/ scan" на "/", поэтому маршрут меняется.

Однако компонент Scanning остается подключенным, а компонент VideoListLayout - нет. Я не могу на всю жизнь понять, почему это происходит. Я бы подумал, что, как только маршрут будет изменен, компоненты также изменятся.

Я уверен, что я делаю что-то не так, но я не могу понять, что это такое. Помощь будет оценена.

Answer 1

Я почти уверен, что вы сталкиваетесь с этой проблемой, описанной в документах о реактивном маршрутизаторе, в которой должен быть реактив-редукса shouldComponentUpdate для предотвращения повторного рендеринга вашего компонента при изменении маршрута: https://reacttraining.com/react-router/core/guides/redux-integration/blocked-updates. Это определенно может быть проблемойи довольно странно!

Как правило, React Router и Redux прекрасно работают вместе.Тем не менее, иногда в приложении может быть компонент, который не обновляется при изменении местоположения (дочерние маршруты или активные навигационные ссылки не обновляются). Это происходит, если: Компонент подключен к резервированию через connect () (Comp).Компонент не является «компонентом маршрута», то есть он не отображается так: проблема в том, что Redux реализует shouldComponentUpdate, и нет никаких признаков того, что что-то изменилось, если он не получает реквизиты от маршрутизатора.Это просто исправить.Найдите, где вы подключаете свой компонент и оберните его с помощью роутера.

Так что в вашем случае вам просто нужно поменять местами порядок соединения и с роутером:

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