有没有办法在反应路由中隐藏查询字符串中的参数？

Question

有没有办法从反应应用程序中的url中删除查询字符串？

this.history.push('component/:id')

我希望在导航时从浏览器网址中删除ID。

Answer 1

Redirect和Link组件都有一个超载的to道具，它可以是上面显示的字符串，也可以是带有以下键的对象：pathname，search，hash，state。所以你的Link可以变成类似的东西

<Link to={pathname: '/component', state: {id: '#id'}} />

但是，请记住，您必须修改Route以不再需要id作为urlParameter，而是在组件中使用this.props.location.state.id来访问变量。

Answer 2

这只是建议：如果你使用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);

Answer 3

还有一些其他的例子hide id or query string while passing through react router