React-router v4 this.props.history.push（...）not working

Question

this.props.history.push(..)を使用してプログラムでルーティングしようとしていますが、動作しないようです。

がここにルータです：CUSTOMERLISTで

import { 
BrowserRouter as Router, 
Route 
} from 'react-router-dom'; 

<Router> 
<Route path="/customers/" exact component={CustomersList} /> 
<Route path="/customers/:id" exact component="{Customer} /> 
</Router> 

、顧客のリストがレンダリングされます。顧客（li）をクリックすると、顧客への申請ルートを作成する必要があります。

import { withRouter } from 'react-router' 

class Customers extends Component { 
    static propTypes = { 
    history: PropTypes.object.isRequired 
    } 

handleCustomerClick(customer) { 
    this.props.history.push(`/customers/${customer.id}`); 
} 

render() { 
    return(
    <ul> 
     { this.props.customers.map((c) => 
     <li onClick={() => this.handleCustomerClick(c)} key={c.id}> 
      {c.name} 
     </li> 
    </ul> 
) 

} 
} 

//connect to redux to get customers 

CustomersList = withRouter(CustomersList); 
export default CustomersList; 

コードは部分的ですが完全な状況を示しています。 ブラウザのアドレスバーがhistory.push（..）に応じて変更されますが、ビューは更新されず、Customerコンポーネントはレンダリングされず、CustomersListはまだそこにあります。何か案は？

Answer 1

反応ルータの最新バージョンでは少し変わったようです。コンテキストを介して履歴にアクセスできるようになりました。 this.context.history.push('/path')

はまた、このgithubの問題への回答を参照してください。https://github.com/ReactTraining/react-router/issues/4059

Answer 2

は、ルータで使用しないでください。

handleSubmit(e){ 
    e.preventDefault(); 
    this.props.form.validateFieldsAndScroll((err,values)=>{ 
     if(!err){ 
     this.setState({ 
      visible:false 
     }); 
     this.props.form.resetFields(); 
     console.log(values.username); 
     const path = '/list/'; 
     this.props.history.push(path); 
     } 
    }) 
} 

これはうまくいきます。

Answer 3

私はこの質問に答えることを望んだが役に立たなかった。私は使用しました

const { history } = this.props; 
history.push("/thePath") 

同じプロジェクトで、期待どおりに動作しました。 さらなる実験といくつかの比較と対照をすると、このコードがネストされたコンポーネント内で呼び出された場合、このコードは実行されないことに気付きました。したがって、レンダリングされたページコンポーネントだけがこの関数を呼び出して、正しく機能するようにすることができます。

検索ワーキングサンドボックスhere

• 歴：
• が反応v4.7.2：v16.0.0
• 反応-DOM：v16.0.0
• 反応-ルータ-DOM： V4.2.2