Question

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

attribute_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

，这里还有其他示例hide id or query string while passing through react router

Answer 3

这仅是建议：如果您使用的是redux，则将您的ID：保存在reducer中然后将任何虚拟字符串推送到您的网址中

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);

有什么方法可以在React路由中从查询字符串中隐藏参数？

3 个答案: