【问题标题】：Remove query param from url从 url 中删除查询参数
【发布时间】：2019-05-27 11:19:29
【问题描述】：

我有以下网址：

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

我想重定向到：

http://my.site#/homepage

我这样做：

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

...

dispatch(push('/homepage'))

但是反应带我去：

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

我如何告诉 React 将查询参数放在浏览器的地址栏中而不重新加载应用程序？

【问题讨论】：

push(...) 是什么？
@Titus decembersoft.com/posts/… github.com/reactjs/… github.com/ReactTraining/history/blob/v3/docs/Location.md
@abelito 我明白了，所以这只是 Redux 调用this.props.history.push(...)的方式
@Titus 我不确定，但它来自react-router-redux
can please use push({ pathname:'/', search: '', hash:'#/hompage' })

标签： javascript reactjs react-router query-parameters

【解决方案1】：

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

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

您可以在项目中使用 newURL。

【讨论】：

【解决方案2】：

试试这个（硬编码方式）

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

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

或者这个

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

那些方法根本不是一个好习惯，但那些工作（肯定是第二种）

【讨论】：

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

【解决方案3】：

根据以下链接，我 git 克隆了这个并在主目录和示例基本目录中运行 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
});

检查控制台，您会看到查询参数（搜索）字段为空

【讨论】：

不适合我。 react 使用的内部 URL 可能会改变，但浏览器栏上的 URL 保持不变。

【解决方案4】：

查看我的路由器部分

 <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 中的参数。谢谢

【讨论】：