Question

我正在使用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.handleChangeCallback  // 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
  }

  handleChange(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.handleChange,
                    value: this.props._value,
                }, options)));
    }
}

在安装组件时，会有HTTP请求来获取一些数据；
提取的数据将保存到状态中，并且下拉菜单会更新；
当选项更改时，路线也会更改。

在下拉菜单中将ReactRouterDOM与HashRouter一起使用

0 个答案: