Как перенаправить ввод нажмите внутри компонента с помощью Redux?

Question

Я пишу простой поисковый компонент, который выполняет поиск по запросуручки.У меня все настройки созданы, так что мой поисковый запрос хранится в избыточности, и результаты отображаются, когда пользователь находится на странице / search.Моя панель поиска доступна из панели навигации (на любой странице), и я пытался перенаправить на страницу результатов ("/ search"), когда пользователь нажимает ввод.Я использую компонент верхнего уровня в App.js.

Я пытался использовать и history.push ("/ search"), но это изменило URL, и веб-страница не отображала новую страницу.

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import { connect } from "react-redux";
import elasticsearchUtility from "../utilities/elastic-search-utility";

const styles = theme => ({
    container: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'center',
        flexDirection: 'row',
    },
    margin: {
        margin: theme.spacing.unit,
    },
    cssLabel: {
        color: 'white',
        '&$cssFocused': {
            color: 'white',
        },
    },
    cssFocused: {
    },
    cssUnderline: {
        color: 'white',
    },
    cssOutlinedInput: {
        '&$cssFocused $notchedOutline': {
            borderColor: 'white',
        },
    },
    notchedOutline: {
        borderWidth: '1px',
        borderColor: 'white !important'
    },
});

class Search extends Component{
    state = {
        searchQuery: ""
    };

    onChange = event => {
        this.props.updateQuery(event.target.value);
    };

    render() {
        const {searchQuery, classes} = this.props;

        return (
            <div className={this.props.classes.container}>
                <TextField
                    fullWidth={true}
                    className={classes.margin}
                    InputLabelProps={{
                        classes: {
                            root: classes.cssLabel,
                            focused: classes.cssFocused,
                        },
                    }}
                    InputProps={{
                        classes: {
                            root: classes.cssOutlinedInput,
                            focused: classes.cssFocused,
                            notchedOutline: classes.notchedOutline,
                        },
                    }}
                    onChange={this.onChange}
                    label="Service search"
                    variant="outlined"
                    id="custom-css-outlined-input"
                    value={searchQuery}
                />
            </div>
        );
    }
}
const mapStateToProps = (state) => {
    return {
        query: state.searchQuery
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        updateQuery: (query) => {
            dispatch(search(query))
        }
    }
};

function search(value) {
    return {type: "SEARCH", value};
}

Search.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(
    connect(
        mapStateToProps,
        mapDispatchToProps
    )(Search)
);

Я ожидаю, что страница выдаст результаты моего поиска, когда пользователь нажмет ввод (инициирует поиск), на самом деле / ​​search выдвигается на URL, но страница не отображается.

Answer 1

Ответ: Необходимо обернуть connect при экспорте по умолчанию с withRouter и использовать this.props.history.push ("/ search").

export default withStyles(styles)(withRouter(
    connect(
        mapStateToProps,
        mapDispatchToProps
    )(Search))
);

Answer 2

import { withRouter } from 'react-router-dom';

onChange = event => {
    this.props.updateQuery(event.target.value);
    this.props.history.replace('/search');

};

export default withStyles(styles)(
    connect(
        mapStateToProps,
        mapDispatchToProps
    )(withRouter)(Search)
);

Вам нужно обернуть свой компонент с помощью withRouter и использовать вот так.