React应用使用<Prompt>组件出现「history仅支持单个prompt」警告的问题

问题根源 #

你在Route中使用render={Abc}的写法不符合React Router 5的规范。render属性要求传入一个返回React元素的函数，直接传递组件类Abc会导致组件被非标准实例化，进而在渲染周期中重复注册<Prompt>组件，触发"一个history同时只能有一个prompt"的警告。

修复方案 #

修改Route的render属性为函数形式，正确传递props并渲染组件：

class App extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          {/* 改为函数形式，传入props并渲染Abc组件 */}
          <Route path="/abc" render={(props) => <Abc {...props} />} />
        </Switch>     
      </Router>
    );
  }  
} 

另外，不建议用全局变量window.inputEditing控制Prompt，建议在组件内部维护状态，更符合React规范：

class Abc extends React.Component {
  state = {
    inputEditing: false
  }

  handleInputChange = () => {
    this.setState({ inputEditing: true });
  }

  render() {
    return (
      <>
        <Prompt 
          message={() => this.state.inputEditing ? "未保存的修改会丢失，确定要离开吗？" : true}
        />
        <input type='text' onChange={this.handleInputChange}/> 
      </>
    );
  }  
} 

补充说明 #

更新react-router-dom到5.3.4无效，是因为这不是版本问题，而是组件渲染方式的错误导致的。

内容的提问来源于stack exchange，提问作者diesel94