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

Question

有什么方法可以从反应应用程序中的 url 中删除查询字符串？

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

我希望在导航时从浏览器 url 中删除 id。

Answer 1

Redirect和Link组件都有一个重载的prop 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);