从URL中删除查询参数

Question

我有以下URL:

http://my.site/?code=74e30ef2-109c-4b75-b8d6-89bdce1aa860

我希望您能将我重定向到以下内容：

http://my.site#/homepage

我用以下方式实现：

import { push } from 'react-router-redux'

...

dispatch(push('/homepage'))

但是React把我带到了：

http://my.site/?code=74e30ef2-109c-4b75-b8d6-89bdce1aa860#/homepage

我该如何让React在不重新加载应用程序的情况下，从浏览器地址栏中删除查询参数？请注意，保留HTML标记。

- blueFast

---

push(...)是什么？ - Titus

@abelito 我明白了，这只是Redux调用this.props.history.push(...)的方式。 - Titus

pathname:'/', search: '', hash:'#/hompage' }) - Neel Patel

你可以尝试使用 history.push(/homepage) 吗？其中的 history 是来自路由属性 https://reacttraining.com/react-router/web/api/Route/route-props - Olivier Boissé

你不应该使用react-router-redux，因为它已经不再维护了，最后一次更新是一年前。你应该使用connected-react-router，我用它没有遇到这样的问题。 - Peter Ambruzs

Answer 1

使用正则表达式，也许这个解决方案对您来说更容易：

  var oldURL = 'http://my.site/?code=74e30ef2-109c-4b75-b8d6-89bdce1aa860'
  var newURL = /(http(s?).+)(\?.+)/.exec(oldDomain)[1] + 'homepage'

你可以在你的项目中使用 newURL。

- uyghurbeg

Answer 2

请查看我的路由器部分

 <div>
                <MainHeader />
                <Switch>
                    <Route exact path='/:pickupLocationName/:pickupDate/:pickupTime/:returnDate/:returnTime' render={(props) => <Quote  {...props} />} />
                    <Route path='/BookerInitial/:user/:id' component={BookerInitial} />
                    <Route path='/VehicleList' component={VehicleList} />
                    <Route path='/AdditionalCoverages' component={AdditionalCoverages} />
                    <Route path='/BookingDetails' component={BookingDetails} />
                    <Route path='/RenterInfo' component={RenterInfo} />
                </Switch>
                <Footer/>
            </div>

BookerInitial页面上有下一个按钮。

<button className="submit btn-skew-r btn-effect" id="nextBtn" style={{ backgroundColor: "#da1c36" }} onClick={this.handleSubmit}  >Next</button>

提交按钮方法

 handleSubmit = () => {
      this.props.history.push('./VehicleList');

    }

我也遇到了这个问题。最终我找到了解决方案，将代码从this.props.history.push('./VehicleList')改为this.props.history.push('/VehicleList')。

你可以看到，代码中的点(.)是问题所在。因此，不需要通过代码删除URL中的参数。

谢谢！

- Nava Ruban

Answer 3

试试这个（硬编码方式）

import { push } from 'react-router-redux'

...
const url = `${window.location.origin}/homepage`;
dispatch(push(url));

或者这一个

history.location.pathname =`${window.location.origin}/homepage`;

那些方法并不是一种好的实践，但那些确实可行（第二个肯定可以）

阅读更多

- Kas Elvirov

---

第一个版本不起作用（查询参数仍然保留在URL中）。第二个似乎强制重新加载页面，这不是我所需要的：查询参数从URL中评估并存储在应用程序状态中，重新加载页面会使我丢失信息。明确一下：我想更改URL而不强制重新加载页面。我将把它添加到问题中。 - blueFast

Answer 4

根据以下链接，我克隆了它并在主目录和基本示例目录中运行了npm install，并运行npm start以获得一个可工作的示例。

https://github.com/reactjs/react-router-redux

https://github.com/reactjs/react-router-redux/tree/master/examples/basic

https://github.com/reactjs/react-router-redux#pushlocation-replacelocation-gonumber-goback-goforward

代码用于删除查询参数（接近底部）并验证它们是否已被删除：

import { createStore, combineReducers, applyMiddleware } from 'redux'
import { browserHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer, routerMiddleware, push } from 'react-router-redux'
import * as reducers from './reducers'

const reducer = combineReducers({
  ...reducers,
  routing: routerReducer
})

const middleware = routerMiddleware(browserHistory)

const store = createStore(
  reducer,
  applyMiddleware(middleware)
)
const history = syncHistoryWithStore(browserHistory, store)

// Dispatch from anywhere like normal.
store.dispatch(push("/?test=ok"));
// store2.dispatch(push(history.createHref("/")));
var count = 0;

history.listen(location => {
    console.log(location);
    if (count > 1) { return; }
    count++;
    store.dispatch(push({ pathname:'/', search: '' })); // Drops the params
});

检查控制台，你会发现查询参数（搜索）字段为空

- abelito

---

对我来说不起作用。React 使用的内部 URL 可能已经改变了，但浏览器地址栏上的 URL 仍然没有变化。 - blueFast