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

问题描述 投票:0回答:3

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

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

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

reactjs routing react-router-v4 react-router-dom react-routing
3个回答
0
投票

RedirectLink组件都有一个超载的to道具,它可以是上面显示的字符串,也可以是带有以下键的对象:pathnamesearchhashstate。所以你的Link可以变成类似的东西

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

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


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.