Есть ли способ скрыть параметры из строки запроса в реакции маршрутизации?

Question

Есть ли способ удалить строку запроса из URL-адреса в приложении реагирования?

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

Я хочу удалить идентификатор из URL-адреса браузера во время навигации.

Answer 1

и другой пример скрытие идентификатора или строки запроса при прохождении через реагирующий маршрутизатор

Answer 2

Это единственное предложение: если вы используете redux, сохраните свой идентификатор: в 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

Компоненты Redirect и Link имеют перегруженную опору to, которая может быть либо строкой, подобной той, что была показана выше, либо объектом со следующими клавишами: pathname, search, hash, state. Так что ваш Link может стать чем-то вроде

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

Однако имейте в виду, что вам придется изменить свой маршрут, чтобы больше не требовать идентификатор в качестве urlParameter, и вместо этого в вашем компоненте вы должны использовать this.props.location.state.id для доступа к переменной.