有没有办法从反应应用程序中的url中删除查询字符串?
this.history.push('component/:id')
我希望在导航时从浏览器网址中删除ID。
Redirect
和Link
组件都有一个超载的to
道具,它可以是上面显示的字符串,也可以是带有以下键的对象:pathname
,search
,hash
,state
。所以你的Link
可以变成类似的东西
<Link to={pathname: '/component', state: {id: '#id'}} />
但是,请记住,您必须修改Route以不再需要id作为urlParameter,而是在组件中使用this.props.location.state.id
来访问变量。
这只是建议:如果你使用redux然后保存你的id:在reducer中然后将任何虚拟字符串推入你的URL它会出现
import React, { Component } from 'react';
import { connect } from 'react-redux';
class example extends Component {
componentDidMount() {
if (this.props.match.params.id != 'dummy-string') {
this.props.saveId(this.props.match.params.id);
this.props.history.push('/component/dummy-string');
}
}
render() {
return (
<div >
<h1>Example</h1>
{this.props.id ?
<div>this.props.id</div>
:null}
</div>
);
}
}
const mapStateToProps = state => ({
id: state.reducer1.id
});
const mapDispatchToProps = dispatch => ({
saveId: (id) => dispatch({ type: 'SAVE_ID',payload:id })
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(example);