javascript - React Router - Kan inte läsa egenskapen 'history' av odefinierad

Jag bygger en stilguide-app. Jag har två rullgardinskomponenter där en användare kan välja både ett varumärke och en komponent - appen kommer då att visa den valda komponenten märkt enligt det valda varumärket. Jag vill att båda dessa alternativ ska inkluderas i URL:en.

De två rullgardinsmenyerna som programmässigt ändrar rutten. Jag får felet TypeError: Cannot read property 'history' of undefined varje gång användaren interagerar med någon av rullgardinsmenyerna.

Jag har en komponent som renderas av en rutt:

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

Den komponenten har två händelsehanterare för två rullgardinskomponenter som låter användaren välja roten:

  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>
    );
  };
}

Jag kapslar in hela appen i Router.

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

Svar #1

Om du får detta felmeddelande i ett test som använder jest måste du omsluta din komponent med en router. Jag använder react-testing-library, så min logik ser ut som följer:

import { render, cleanup } from '@testing-library/react'
import { BrowserRouter as Router } from 'react-router-dom'
import YourComponent from '../path/to/YourComponent'

// ...
describe('YourComponent component', () => {
  afterEach(cleanup)
  it('matches snapshot', () => {
    const { asFragment } = render(
      // The following will solve this issue
      <Router>
        <YourComponent />
      </Router>
    )
    expect(asFragment()).toMatchSnapshot()
  })
})

Svar #2

Kan du prova följande ändringar handleComponentPick(event: any) { till handleComponentPick=(event: any) => { sedan render =() => { till render() { Hoppas detta fungerar.