Question

使用hashHistory提供的react-router向网址添加查询参数时出现问题：

路由器 - react-router@3.2.0

<Router history={hashHistory}>
    <Route path="home" component={Home} />
    <Route path="contact" component={Contact} />
    <Redirect from="*" to="/home" />
</Router>

使用hashHistory添加查询参数：

JS

hashHistory.push({
    query: {
        someParam: 'paramValue'
    }
});

方案

我在/contact页面上，点击后我想在网址中添加查询参数someParam。我将上面的代码与hashHistory一起使用。此操作的结果是重定向到/home?someParam=paramValue。

似乎只有push()提供的方法query会将新网址视为/。因此，尽管如此，Redirect将使用给出参数回家。

Answer 1

<强>解决方案

为避免被重定向到/home或任何其他设置为重定向页面的网页，需要为push()方法提供路径名：

<强> JS

const currentLocation = hashHistory.getCurrentLocation();

hashHistory.push({
    pathname: currentLocation.pathname,
    query: {
        someParam: 'paramValue'
    }
});

我们可以从hashHistory getCurrentLocation()方法中提取当前路径。

如果hashHistory插入查询参数，则React Redirect将重定向到404页面

1 个答案: