编辑

Question

我的React App中有一个组件，是一个表单。该表格用于创建新许可证或编辑现有许可证。无论哪种方式，它都是一个组件，并检查componentDidMount（）是哪个“ pageType”（添加/更新）。现在我要解决的问题是，当我使用表单来编辑许可证（被许可人/：id /编辑），并且单击“坐浴盆”按钮来创建新许可证（被许可人/添加）时，它不会重新安装零件。它将更改URL，但所有预加载的数据仍为表单。

  LicenseeForm = Loadable({
    loader: () => import('./license/LicenseeForm'),
    loading: 'Loading..'
  });

render() {
    return (
      <Router>
        <Switch>
          <LoginRoute exact path="/" component={this.LoginView}/>
          <LoginRoute exact path="/login" component={this.LoginView}/>
          <PrivateRoute exact path="/licensees/add" component={this.LicenseeForm}/>
          <PrivateRoute exact path="/licensees/:id/update" component={this.LicenseeForm}/>
          <Route path="*" component={this.NotFoundPage}/>
        </Switch>
      </Router>
    )
  }

const PrivateRoute = ({component: Component, ...rest}) => (
  <Route
    {...rest}
    render={props =>
      authService.checkIfAuthenticated() ? (<Component {...props} />) :
        (<Redirect
            to={{
              pathname: "/login",
              state: {from: props.location}
            }}/>
        )
    }
  />
);

组件：

componentDidMount() {
    const locationParts = this.props.location.pathname.split('/');
    if (locationParts[locationParts.length-1] === 'add') {
      this.setState({pageType: 'add'});
    } else if (locationParts[locationParts.length-1] === 'update') {
      this.setState({pageType: 'update'});
...
}}

编辑

这是现在的工作方式：

          <PrivateRoute exact path="/licensees/add" key="add" component={this.LicenseeForm}/>
      <PrivateRoute exact path="/licensees/:Id/update" key="update" component={this.LicenseeForm}/>

Answer 1

如果在更改路线时确实需要重新安装组件，则可以将唯一键传递给组件的key属性（该键与您的路径/路由相关联）。因此，每当路线更改时，密钥也会更改，从而触发React组件的卸载/重新安装。

Answer 2

如果路线相同，并且仅路径变量发生更改（在您的情况下为“ id”），那么位于路线顶层的组件将收到componentWillReceiveProps中的更改。

componentWillReceiveProps(nextProps) {
  // In this case cdm is not called and only cwrp know
  // that id has been changed so we have to updated our page as well
  const newLicenseId = nextProps.match.params.id;

  // Check id changed or not
  if(currentLicenseId != newLicenseId) {
    updateState(); // update state or reset state to initial state
  }
}

我粘贴的代码使您能够检测到页面已更改并更新状态或将其重新分配为初始状态。另外，假设您是第一次访问许可证页面，然后将当前ID保存在变量中。只有您将在componentWillReceiveProps中使用它来检测更改。

Answer 3

使用道具“渲染”代替组件。

根据文档组件，在父状态更改时重新安装道具，但渲染道具更新。

https://reacttraining.com/react-router/web/api/Route/route-render-methods

React-Router不会在不同路径上重新安装组件

编辑

3 个答案: