Search code examples
javascriptreactjsreduxreact-routergrommet

React Router HashRouter inserting a ? before # in url

I'm getting some strange behaviour with react/redux/react-router on Chrome. I have a component that looks like this:

const PageHeader = withRouter( props => 
    <Form plain={true} onSubmit={() => props.history.push("/search")} >

    {/*component stuff goes here */}
)

when I submit the form on Firefox it brings me to the correct url, i.e. http://myip/#/search. However on Chrome it brings me to the following url: http://myip/?#/search which for some reason is also refreshing the app so I lose all the state in my store. Has anyone observed this behaviour before?

(Also for the form component I'm using grommet)

Solution

  • Try suppressing the default submit behavior by changing your form to 

    <Form plain={true} 
    onSubmit={(e) => { e.preventDefault(); props.history.push("/search")}} >