反应路由器重定向到自身/相同页面

Question

如何在自身页面中的React Router中重定向。例如，我有一个组件ProfileUpdate，它将名称更新并存储到后端。更新成功后，我想重定向到同一页面，但无法正常工作。这是示例代码。

class ProfileUpdate extends Component {
    constructor() {
        super();

        this.state = {
            name: ''
        };
  }

  onSubmit(e) {
    e.preventDefault();
    this.props.history.replace('/');    
  }

  onChange(e) {
    const name = e.target.value;
    this.setState(() => ({
      name
    }))
  }

    render() {
        return (
            <form onSubmit={this.onSubmit}>
                <div>
                    <h4>Display Name:</h4>
                    <div>
                        <input name='displayName' placeholder='Display name' type='text' value={this.state.name} onChange={this.onChange} />
                    </div>
                </div>
                <div>
                    <button type='submit'>Update</button>
                </div>
            </form>
        );
    }
}

如果我先更新名称，然后单击“提交”，则会出现预期的行为，它将替换路由/重定向，并且名称输入应为空。

但是当我选择其他路径替换时，它可以工作。例如this.props.history.replace('/users')可以正常工作。但是这里this.props.history.replace('/');无效。