Question

我正在使用带有mobx的react-router-dom：“ 4.3.1”，然后尝试仅重定向到我的路由。阅读了很多类似的问题后，我无法解决此问题。

我尝试过在状态中存储一些标志，并根据它使用。尝试使用

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

在mobx装饰器之前和之后尝试使用withRouter包装组件。使用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>

通常，react-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;

有一个例子，这个小的组件包装在另一个组件上，并在创建实例后重定向到该组件。重定向时该项目已存在

react-router-dom网址已更改，但未更新视图（withRouter无限刷新）

1 个答案: