React-router redirects to 404 when used with query params

Question

I need to change the address in browser when the user submits the search query, based on that query (something familiar to what Google does). When I do this, the address changes properly, but it redirects me to my 404 route. And when I manually input text to the address bar, I can see the proper page.

This is a part of my routes:

...
<Route path="some-address" component={MyComponent}>
    <Route  path=":query" />
</Route>
...

Here's a simplified version of my component:

@withRouter
@connect(...)
export default class MyComponent extends Component {
    ...
    render() {
        return (
            <form onSubmit={(e) => {
                e.preventDefault(); 
                this.props.router.push(e.target.myInput.value)}}
            >
                <input name="myInput" />
            </form>
    }
}

React Router is 2.6.1 version.

OlehZiniak · Accepted Answer · 2016-09-06 20:31:25Z

1

This is how I managed to solve this:

    @withRouter
    @connect(...)
    export default class MyComponent extends Component {
        ...
        render() {
            return (
                <form onSubmit={(e) => {
                    e.preventDefault(); 
                    this.props.router.push({
                        pathname: this.props.location.pathname,
                        query: e.target.myInput.value && {search: e.target.myInput.value}
                    })
                }}>
                    <input name="myInput" />
                </form>
        }
    }

answered Sep 6, 2016 at 20:31

OlehZiniak

9631 gold badge13 silver badges30 bronze badges

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

Comments

user5738822 · Accepted Answer · 2016-09-06 12:32:37Z

0

use this syntax :

<Route path="/some-address" component={MyComponent}>
    <Route  path=":query" />
</Route>

answered Sep 6, 2016 at 12:32

user5738822

Collectives™ on Stack Overflow

React-router redirects to 404 when used with query params

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related