Add query parameters in link react-router

Question

I am trying to add query parameters in my url, but having trouble. For visual sakes I put the Link object in the onSubmit, but I know that this is not allowed.

<form onSubmit={<Link to={{ pathname: '/me', query: { showAge: true } }}/>}>
 .....
</form>

whats the issue you are facing when using the same link line ?? — Mayank Shukla
– Mayank Shukla, Commented Feb 24, 2017 at 5:21
It says Expected onSubmit listener to be a function, instead got type object — joethemow
– joethemow, Commented Feb 24, 2017 at 5:27
when I submit the form, I want it to go to /me but also have the parameter showAge, so /me?showAge=true — joethemow
– joethemow, Commented Feb 24, 2017 at 5:29

Mayank Shukla · Accepted Answer · 2017-02-24 06:50:57Z

2

Use browserHistory/hashHistoryWrite.push(), to got to specific route, onSubmit call. Put all the values in query that you want to pass, like this:

onSubmit={()=>hashHistory.push({
                 pathname: '/me',
                 query: {a: "a", b: "b", "c": c}
              })
};

or

onSubmit={()=>browserHistory.push({
                 pathname: '/me',
                 query: {a: "a", b: "b", "c": c}
              })
};

edited Feb 24, 2017 at 6:50

answered Feb 24, 2017 at 5:33

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

3 Comments

joethemow Over a year ago

Hm, usually when you add parameters to url there wouldn't typically be me/params instead it would be me?params

joethemow Over a year ago

Yeah, I want to pass multiple parameters, but there is not query parameter in the browserHistory.push

Mayank Shukla Over a year ago

check the updated ans, i thought you just want to pass only one query parameter, in case of multiple use the pathname and query to pass multiple values :)

spedy · Accepted Answer · 2018-08-26 12:13:50Z

0

I solved it by doing:

let clientId = 2;

this.props.history.push({
    pathname: '/client',
    search: "?" + new URLSearchParams({clientId: clientId}).toString()
})

or

this.props.history.push('/client?clientId=1')

I put the above code in a function and binded it in constructor so it has access to props and props.history in your case:

constructor(props){
    super(props)
    this.onSubmitClick = this.onSubmitClick.bind(this)
}

onSubmitClick(){
    this.props.history.push('/client?clientId=1')
}

and

<form onSubmit={this.onSubmitClick}>

</form>

You might also need to wrap your component in a withRouter decorator eg. export default withRouter(Component);

edited Aug 26, 2018 at 12:13

answered Aug 26, 2018 at 11:58

spedy

2,37027 silver badges26 bronze badges

Collectives™ on Stack Overflow

Add query parameters in link react-router

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related