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

【问题标题】：React-router redirects to 404 when used with query params与查询参数一起使用时，React-router 重定向到 404
【发布时间】：2016-09-06 11:38:33
【问题描述】：

当用户提交搜索查询时，我需要根据该查询更改浏览器中的地址（这与 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 版本。

【问题讨论】：

标签： reactjs redux react-router

【解决方案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>
        }
    }

【讨论】：

【解决方案2】：

使用这个语法：

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

【讨论】：