Использование ReactRouterDOM с HashRouter в раскрывающемся меню

Я использую withRouter() для преобразования выпадающего меню в маршрутизаторе. К сожалению, мне нужно использовать хешированные маршруты.

Есть ли аналогичный подход, который можно использовать с HashRouter. Спасибо.

ОБНОВИТЬ:

Это соответствующий источник в main.js.

class App extends React.Component {
  // ...

  render() {
    return (
      React.createElement(ReactRouterDOM.BrowserRouter, null,
        React.createElement("div", null,
        // ...

        React.createElement(ReactRouterDOM.withRouter(Dropdown), {
          _value: this.state.foo,
          _options: [this.state.foo],
          _onChangeCallback: this.handleChangeEventCallback  // this updates the state
        }),
        // ...

        )
      )
    )
  }
}

В dropdown.js компонент меняет маршрут соответственно с раскрывающимся списком:

export default class Dropdown extends React.Component {
  // ...

  componentWillMount() {
    if (this.props._value) this.props.history.push(`/${this.props._value}`);  // update route
  }

  handleChangeEvent(event) {
    this.props._onChangeCallback(event.target.value);  // update the state
  }
  // ...

    render() {
        const options = this.props._options.map((val) => React.createElement("option", {value: val}, val));

        return React.createElement("div", null,
            React.createElement("span", null,
                React.createElement("select", {
                    onChange: this.handleChangeEvent,
                    value: this.props._value,
                }, options)));
    }
}

Когда компонент монтируется, возникает HTTP-запрос на получение некоторых данных;
Полученные данные сохраняются в состоянии, а выпадающее меню обновляется;
При изменении опции меняется и маршрут.

Не могли бы вы предоставить пример кода того, что вы пытались сделать?

Dor Shinar 02.03.2019 19:19

@DorShinar Я обновил вопрос, спасибо.

isar 02.03.2019 19:58

@DorShinar Я жестко закодировал хэш в пути (this.props.history.push(`/#/${this.props._value}`);), и, похоже, он работает. В любом случае, спасибо.

isar 02.03.2019 20:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
3
169
0

Другие вопросы по теме