React - TypeError: невозможно прочитать свойство 'pu sh' неопределенного значения, уже экспортированное по умолчанию withRouter

Question

У меня есть компонент страницы SimulationReport, на который я хочу перенаправить при нажатии кнопки из компонента страницы Reports. Это компонент App с Router:

function App() {
  return (
    <React.Fragment>
      <Router>
        <NavigationBar />
        <Sidebar />
        <Switch>
          <Route exact path="/" component={Ratings} />
          <Route path="/LeagueSettings" component={LeagueSettings} />
          <Route path="/Fixtures" component={Fixtures} />
          <Route path="/Reports" component={Reports} />
          <Route path="/SimulationReport" component={SimulationReport} />
        </Switch>
      </Router>
    </React.Fragment>
  );
}

И вот соответствующие биты кода из Reports, который является функциональным компонентом:

import {withRouter} from "react-router-dom";

<td>
   <Button variant="primary" onClick={handleSimView(index)}>
   View
   </Button>
</td>

  const handleSimView = index => e => {
    console.log("index: " + index);
    loadSimulationResult(simulationIds[index]);
    props.history.push("/SimulationReport");
  };

И в конец файла у меня есть:

export default withRouter(Reports);

После нажатия кнопки я получаю эту ошибку:

TypeError: Cannot read property 'push' of undefined

Я не уверен, что мне нужно сделать, чтобы перенаправить это ? Или, может, мне стоит поступить иначе?

Answer 1

Похоже, ваша опора history не передается из тега <Route> в вашем компоненте. Вы можете передать свойства компоненту Route Rendered, выполнив следующую строку:

<Route
 path='/SimulationReport'
 render={(props) => <SimulationReport {...props} history={yourHistoryObjectForTheRouter} />}
/>

, где yourHistoryObjectForTheRouter будет вашим настраиваемым объектом экспорта истории.

ИЗМЕНИТЬ : Обновленный код

ОБНОВЛЕНИЕ ДЛЯ ОТВЕТА НА АДРЕС ПОТРЕБНОСТЕЙ ОП:

1 ° Хорошо, так что сначала вам необходимо установить пакет под названием history в ваше приложение React. (Вы можете использовать npm i history или yarn add history. Это зависит от того, что вы установили. Если вы не знаете, что такое пряжа , используйте параметр npm)

2 ° Где-то в вашем проекте внутри App папки (src / App /) , вы собираетесь создать другую папку с именем history и внутри index.js. Следующим будет содержимое файла index.js.

import { createBrowserHistory } from 'history';

export default createBrowserHistory({});

3 ° Как только это будет сделано, перейдите в свой App/index.js файл, где находится ваш основной тег <Router>. Если вы сделали все, как я говорил ранее, в этом App/index.js вы собираетесь добавить новый импорт:

import history from "./history";

Это ваш новый пользовательский объект истории.

Здесь вы можете выбрать два пути решения вашей проблемы

=== Первое решение

4 ° Прокрутите вниз в том же файле, пока не найдете свой тег <Router></Router>, и вы собираетесь обновить его до следующей части:

<Router>
   <NavigationBar />
    <Sidebar />
    <Switch>
      <Route exact path="/" component={Ratings} />
      <Route path="/LeagueSettings" component={LeagueSettings} />
      <Route path="/Fixtures" component={Fixtures} />
      <Route path="/Reports" component={Reports} />
      <Route
          path='/SimulationReport'
          render={(props) => <SimulationReport {...props} history= 
              {history} />}
      />
    </Switch>
</Router>

После этого у вас будет настроен пользовательский объект истории. вверх, и теперь ваш компонент должен работать. Однако это решение будет работать только для указанного c компонента Route, а это означает, что вам придется сделать то же самое для другого <Route >, требующего использования объекта истории.

Остановитесь здесь, если вы выберете это решение.

=== Второе решение

Это решение лучше, потому что теперь у вас будет доступ к ваш объект истории глобально, просто с импортом.

4 ° Прокрутите вниз в том же файле, пока не найдете свой тег <Router></Router>, и вы собираетесь обновить его до следующей части:

<Router history={history}> //Here's the change
   <NavigationBar />
    <Sidebar />
    <Switch>
      <Route exact path="/" component={Ratings} />
      <Route path="/LeagueSettings" component={LeagueSettings} />
      <Route path="/Fixtures" component={Fixtures} />
      <Route path="/Reports" component={Reports} />
      <Route path="/SimulationReport" component={SimulationReport} />
    </Switch>
</Router>

После этого у вас будет настроен пользовательский объект истории.

5 ° Перейдите к файлу, который содержит функциональный компонент Reports, и к импорту в верхней части вашего файл, вы собираетесь импортировать тот же history, что и в App/index.js. Помните, что импорт будет меняться в зависимости от уровня вложенных папок, в которых находятся ваши компоненты отчетов. Это может закончиться так:

import history from "../history"; или это import history from "../../history"; в зависимости от обстоятельств или даже больше "../". Это зависит от уровней вашей подпапки

После этого вам нужно будет обновить свою функцию handleSimView, поэтому вместо этого:

const handleSimView = index => e => {
    console.log("index: " + index);
    loadSimulationResult(simulationIds[index]);
    props.history.push("/SimulationReport");
  };

сделайте это:

const handleSimView = index => e => {
    console.log("index: " + index);
    loadSimulationResult(simulationIds[index]);
    history.push("/SimulationReport"); //Change is here, removed "props."
  };

После этого ваш код должен заработать. Это решение, которое вы можете реализовать везде, так как вам нужно только импортировать объект истории и просто использовать его.

Я буду ждать вашего ответа, чтобы узнать, сработало ли оно. Если еще что-нибудь случится, спросите меня.