패스 나는 다음과 같은 양식 제출 버튼이있는 반작용 양식을 가지고 온 클릭 기능

Question

에서 라우터 경로를 반응한다.

handleSubmit(evt) { 
    evt.preventDefault(); 
    this.setState({form_submitted: true}); 
} 

<Link className="btn btn-secondary btn-width-200 search-submit" to={{pathname: '/booking/search', query: this.state.filters}} onClick={this.handleSubmit.bind(this)}>Search</Link> 

그러나 다음은 to={{pathname: '/booking/search', query: this.state.filters}} 무시하고 단지 handleSubmit 기능에 to={{pathname: '/booking/search', query: this.state.filters}}을 추가 어쨌든 고려

에 handleSubmit 기능이 있나요한다? 아니면이 문제를 해결할 수 있습니까?

Answer 1

이 :

import {browserHistory} from 'react-router'; 

handleSubmit(evt) { 
    evt.preventDefault(); 
    this.setState({form_submitted: true}); 
    return this.redirect('/booking/search', this.state.filters); 

} 

redirect(to, query) { 
    browserHistory.push({pathname: to, query}) 

} 

<a 
    className="btn btn-secondary btn-width-200 search-submit" 
    onClick={this.handleSubmit} > 
    Search 

</a> 

:

import {Link} from 'react-router'; 

handleSubmit(evt) { 
    evt.preventDefault(); 
    this.setState({form_submitted: true}); 
} 

<Link 
    className="btn btn-secondary btn-width-200 search-submit" 
    to={{pathname: '/booking/search', query: this.state.filters}}> 
    Search 

</Link> 

은 교체 할 수 있습니다

Answer 2

Link 대신 외부 기능에서 푸시 라우터 방법을 사용할 수 있습니다. 예를 들면 :

redirectFunction() { 
this.handleSubmit() 
router.push({ 
    to: '/booking/search', 
    query: this.state.filters 
}) 
} 

render() { 
    <div 
    className="btn btn-secondary btn-width-200 search-submit" 
    onClick={this.redirectFunction.bind(this)}> 
    Search 
    </div> 
} 

Answer 3

당신이 어떻게 react-router API를 사용하여 경로를 달성하는 것입니다 이해할 필요가 모든. 기본적으로 두 개의 API (browserHistory 및 hashHistory)로 구성 할 수 있습니다. (link)

다른 말로하면 browserHistory.push('/booking/search') 또는 hashHistory.push('/booking/search')을 호출하면 경로를 탐색 할 수 있어야합니다.

일부 액션 디스패치를 ​​통해 내비게이션을 관리하려는 경우를 대비하여 절약 버전도 있습니다 (필요한 것은 아니지만). 더 많은 정보를 들어 Link

: Programmatically navigate using react router