React Router - не может прочитать свойство 'history' из undefined

Question

Я создаю приложение стиля.У меня есть два выпадающих компонента, в которых пользователь может выбрать как марку, так и компонент - приложение затем отобразит выбранный компонент с маркой в ​​соответствии с выбранным брендом.Я хочу, чтобы обе эти опции были включены в URL.

Два выпадающих списка, которые программно меняют маршрут.Я получаю сообщение об ошибке TypeError: Невозможно прочитать свойство 'history' undefined всякий раз, когда пользователь взаимодействует с любым из раскрывающихся списков.

У меня есть компонент, отображаемый по маршруту:

<Route path="/:brand/:component"
render={props => <DisplayComponent {...props} />} />

Этот компонентесть два обработчика событий для двух выпадающих компонентов, которые позволяют пользователю выбрать корень:

  handleComponentPick(event: any) {
    const component = event.target.value;
    this.props.history.push(`/${this.props.match.params.brand}/${component}`);
  }

  handleBrandChange = (event: any) => {
    if (event.target instanceof HTMLElement) {
      const brand = event.target.value;
      this.props.history.push(`/${brand}/${this.props.match.params.component}`);
    }
  };
  render = () => {
    return (
      <div className={"constrain-width-wide center "}>
        <ThemePicker
          component={this.props.match.params.component}
          brand={this.props.match.params.brand}
          handleBrandChange={this.handleBrandChange}
          handleComponentPick={this.handleComponentPick}
        />
        <div className="currently-selected-component" />
        <Route path="/:brand/button" component={Button} />
        <Route path="/:brand/card" component={Card} />
      </div>
    );
  };
}

Я обертываю все приложение в Router.

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);```

Answer 1

вы должны передать историю как

  <Router history={browserHistory} routes={routes} />,

, таким образом, вы можете использовать историю с реквизитом для навигации.

шрифт: https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md

попытатьсяиспользуйте browserHistory в вашем app.js, например,

render(
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <IndexRoute component={Home} />
      <Route path='about' component={About} />
      <Route path='features' component={Features} />
    </Route>
  </Router>,
  document.getElementById('app')
)

, таким образом, вы передаете историю для всех ваших других маршрутизаторов.

Answer 2

Нам нужно передать history в качестве реквизита Router.Я ожидаю, что вы используете реагирующий маршрутизатор v4 aka react-router-dom.

import { createBrowserHistory } from "history";
import { Router } from "react-router-dom";


const history = createBrowserHistory();

    ... 

<Router history={history}>
     <Routes />
</Router>

Демо: https://codesandbox.io/s/yv5y905ojv

Answer 3

Можете ли вы попробовать следующие изменения handleComponentPick(event: any) { до handleComponentPick = (event: any) => {, затем render = () => { до render() { Надеюсь, это сработает.