[英]Remove query param from url
我有以下网址:
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 将查询参数删除到浏览器的地址栏中?
使用正则表达式也许这个解决方案对你来说更容易:
var oldURL = 'http://my.site/?code=74e30ef2-109c-4b75-b8d6-89bdce1aa860'
var newURL = /(http(s?).+)(\?.+)/.exec(oldDomain)[1] + 'homepage'
您可以在项目中使用 newURL。
试试这个(硬编码方式)
import { push } from 'react-router-redux'
...
const url = `${window.location.origin}/homepage`;
dispatch(push(url));
或者这个
history.location.pathname =`${window.location.origin}/homepage`;
这些方法根本不是一个好的做法,而是那些工作(肯定是第二个)
根据以下链接,我 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
});
检查控制台,您会看到查询参数(搜索)字段为空
查看我的路由器部分
<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>
<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 中的参数。 谢谢你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.