Pass react router path in onClick function

Question

I have a React form which has the following form submission button:

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

</Link>

In the above link I want to call a function handleSubmit(evt) on button click.

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>

But the following ignores the to={{pathname: '/booking/search', query: this.state.filters}} and just takes handleSubmit function into consideration

Is there anyway to add to={{pathname: '/booking/search', query: this.state.filters}} to the handleSubmit function? Or is there anyway to resolve this issue?

Abdennour TOUMI · Accepted Answer · 2017-02-06 19:40:30Z

2

This 👇🏼 :

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>

Can be replaced by 👇🏼 :

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>

edited Feb 6, 2017 at 19:40

answered Feb 6, 2017 at 19:20

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:24:24Z

2

All you need to understand is, how to achieve route using react-router API. Basically you can configure it on two API, browserHistory and hashHistory. (link)

So, in otherword, by calling browserHistory.push('/booking/search') or hashHistory.push('/booking/search') you should be able to navigate between routes.

There is redux version also available, just in case if you want to manage your navigation via some action dispatch (though it is not necessary). Link

For more info: Programmatically navigate using react router

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Feb 6, 2017 at 18:22

Aman

5,77010 gold badges57 silver badges92 bronze badges

Comments

Robsonsjre · Accepted Answer · 2017-02-06 18:28:15Z

1

You can use the push router method in external Function instead of using Link. For example:

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>
}

edited Feb 6, 2017 at 18:28

answered Feb 6, 2017 at 18:20

Robsonsjre

1,57112 silver badges19 bronze badges

Collectives™ on Stack Overflow

Pass react router path in onClick function

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related