reactjs - 与查询参数一起使用时，React-router 重定向到 404

Question

当用户提交搜索查询时，我需要根据该查询更改浏览器中的地址(Google 所做的事情很熟悉)。当我这样做时，地址会正确更改，但它会将我重定向到我的 404 路由。当我手动向地址栏输入文本时，我可以看到正确的页面。

这是我的路线的一部分:

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

这是我的组件的简化版本:

@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 是 2.6.1 版本。

Answer 1

这就是我设法解决这个问题的方法:

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