経路上にない場合は（ '/'）、フォームを送信した後にその経路に移動する

Question

私は、反応の中でAPIに検索要求を行うと動作します。ユーザーが使用しようとすると、 （ '/'）になっていなくても、検索バーをそのページにリダイレクトして結果を表示します。他のルートで検索バーを使用しようとすると、要求が送信されます結果を表示するルート）が、私はbrowserHistory（「/」）を行うにしようと、私はエラーを取得し、この

/* 
* searchBar 
* 
* This is the first thing users see of our App, at the '/' route 
*/ 

import React from 'react'; 
import Helmet from 'react-helmet'; 
import { FormattedMessage } from 'react-intl'; 
import { connect } from 'react-redux'; 
import { createStructuredSelector } from 'reselect'; 
import { browserHistory } from 'react-router'; 

import { makeSelectRepos, makeSelectLoading, makeSelectError } from 'containers/App/selectors'; 
import H2 from 'components/H2'; 
import ReposList from 'components/ReposList'; 
import AtPrefix from './AtPrefix'; 
import CenteredSection from './CenteredSection'; 
import Form from './Form'; 
import Input from './Input'; 
import Section from './Section'; 
import messages from './messages'; 
import { loadRepos } from '../../containers/App/actions'; 
import { changeUsername } from './actions'; 
import { makeSelectUsername } from './selectors'; 

import ActionBar from 'components/MainActionContainer/homepage'; 



import styled from 'styled-components'; 

const SearchWrapper = styled.div` 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    padding-left: 4%; 
    padding-right: 4%; 
    padding-top: 30px; 
    padding-bottom: 60px; 
    height: 200px; 
    display: flex; 
    @media screen and (max-width: 360px) { 
    width: 82%; 
    position: absolute; 
    top: -21px; 
    right: 0px; 
    height: 200px; 
    padding-left: 4%; 
    padding-right: 4%; 
    padding-bottom: 60px; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    } 
`; 

const InputSearch = styled.input` 
    width: 90%; 
    height: 100%; 
    text-align: end; 
    color: gray; 
    padding-top: 45px; 
    font-size: 2.8em; 
    outline: 0; 
    border-width: 0 0 2px 0; 
    border-color: red; 
    border-bottom: 2px solid red; 
    font-family: district-pro, sans-serif; 
    font-style: normal; 
    font-weight: 100; 
    margin-left: 10%; 

    &:hover { 
    background-color: #fff; 
    } 

`; 

const InputIcon = styled.div` 
    float: right; 
    height: 100%; 
    margin-left: 5%; 
    width: 11%; 
    border-bottom: 2px solid red; 
    padding-top: 40px; 

    @media screen and (max-width: 360px) { 
    padding-top: 60px; 
    } 
`; 

const Icon_eyeglass = styled.a` 
    font-size: 3.5em; 

    @media screen and (max-width: 360px) { 
    font-size: 2.2em; 
    } 
`; 




export class SearchBar extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function 
    /** 
    * when initial state artist is not null, submit the form to load repos 
    * 
    */ 
    componentDidMount() { 
    if (this.props.username && this.props.username.trim().length > 0) { 
     this.props.onSubmitForm(); 
    } 
    } 

    render() { 
    const { loading, error, repos } = this.props; 
    const reposListProps = { 
     loading, 
     error, 
     repos, 
    }; 

    return (
     <div> 
     <Helmet 
      title="Home Page" 
      meta={[ 
      { name: 'description', content: 'Search upcoming concerts by your favorite Artist' }, 
      ]} 
     /> 

     <SearchWrapper> 
      <form onSubmit={this.props.onSubmitForm} autoComplete="off"> 
       <label htmlFor="username"> 
       <InputSearch 
        id="username" 
        type="text" 
        placeholder="Search" 
        value={this.props.username} 
        onChange={this.props.onChangeUsername} 
        autoComplete="off" 
       /> 
       </label> 
      </form> 
      <InputIcon> 
        <Icon_eyeglass className="material-icons">search</Icon_eyeglass> 
      </InputIcon> 
     </SearchWrapper> 
     </div> 
    ); 
    } 
} 

SearchBar.propTypes = { 
    loading: React.PropTypes.bool, 
    error: React.PropTypes.oneOfType([ 
    React.PropTypes.object, 
    React.PropTypes.bool, 
    ]), 
    repos: React.PropTypes.oneOfType([ 
    React.PropTypes.array, 
    React.PropTypes.bool, 
    ]), 
    onSubmitForm: React.PropTypes.func, 
    username: React.PropTypes.string, 
    onChangeUsername: React.PropTypes.func, 
}; 

export function mapDispatchToProps(dispatch) { 
    return { 
    onChangeUsername: (evt) => dispatch(changeUsername(evt.target.value)), 
    onSubmitForm: (evt) => { 
     if (evt !== undefined && evt.preventDefault) evt.preventDefault(); 
     dispatch(loadRepos()); 
    }, 
    }; 
} 

const mapStateToProps = createStructuredSelector({ 
    repos: makeSelectRepos(), 
    username: makeSelectUsername(), 
    loading: makeSelectLoading(), 
    error: makeSelectError(), 
}); 

// Wrap the component to inject dispatch and state into it 
export default connect(mapStateToProps, mapDispatchToProps)(SearchBar); 

---

を行うための適切な方法は何である私は、この試みた：

を210

export function mapDispatchToProps(dispatch) { 
    return { 
    onChangeUsername: (evt) => dispatch(changeUsername(evt.target.value)), 
    onSubmitForm: (evt) => { 
     if (evt !== undefined && evt.preventDefault) evt.preventDefault(); 
     dispatch(loadRepos()) 
     .then(
     () => { 
       browserHistory.push('/'); 
      } 
    )} 
    }; 
} 

が、エラー

捕捉されない例外TypeErrorを行く：プロパティを読み取ることができません未定義

Answer 1

の「プッシュ」あなたが反応し、ルータをV4を使用している場合、あなたはこのような状態であなたのルートを関連付けることができます。

を

<Route path='/*' render={() => (this.state.repos ? (<Redirect to='/' />) : (<DefaultComponent />))} /> 

したがって、sbがreposをreetchすると、彼はメインページにリダイレクトされますが、reposの次の更新を処理するには、コンポーネントをアンマウントする前に状態をクリアする必要があります。