URL-адрес response-router-dom изменен, но обновление представления отсутствует (с обновлением бесконечности withRouter)

Question

Я использую response-router-dom: «4.3.1» с mobx, и попробуйте просто перенаправить на мой маршрут.Прочитав много похожих вопросов, я не могу решить эту проблему.

Я пытался сохранить в состоянии какой-то флаг и в соответствии с ним использовать.Пробное использование

 this.props.history.push('....');
 this.forceUpdate();

Пробная обертка компонента withRouter до декораторов mobx и после.С помощью withRouter мой компонент запускает рендеринг inifinity, а мой componentDidMound вызывает API бесконечность.(если я заверну после mobx) Я перепробовал много вариантов, и эта библиотека все еще не работает должным образом.

// my main component
 <Router basename={`/${baseName}`}>
    <Provider store={store}>
      ...
    </Provider>
  </Router>
// my routes
 <Switch>
    <Route path="/home" component={ComponentA} />
    <Route exact path="/a" component={ComponentB} />
    <Route path="/a/:id" component={ComponentA} />
    <Redirect to="/home" /> // this works normal
  </Switch>

Обычно response-router-dom просто меняет URL браузера, но не выполняет повторное рендеринг компонента, но с withRouter это запускает бесконечность API-вызовов.Как мне использовать эту библиотеку с перенаправлением в любых случаях?

Answer 1

import { inject, observer } from 'mobx-react';
import * as React from 'react';
import { Col, PageHeader, Row, Well } from 'react-bootstrap';
import CompanyNew from './CompanyNew';
import { Company, InjectedProps } from '../../types';

interface CompanyNewPageProps extends InjectedProps {
  history: HIstory
}

@inject('store')
@observer
export class CompanyNewPage extends React.Component<CompanyNewPageProps> {
  public get injected() {
    return this.props as InjectedProps;
  }

  public render() {
    return (
      <>
        <PageHeader>Create new Company</PageHeader>
        <Col className="col-lg-12">
          <Row>
            <Well>
              <CompanyNew handleClose={this.itemAdded} />
            </Well>
          </Row>
        </Col>
      </>
    );
  }

  public itemAdded = (company: Company) => {
    this.props.history.push(`/companies/${company.id}`);
    this.forceUpdate();
  }
}

export default CompanyNewPage;

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