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

使用以下语法：

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

Answer 2

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

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

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

2 个答案: