在 reactstrap 中重定向后滾動不起作用

Question

我正在使用 React 開發一個簡單的、類似寵物店的應用程序。 它的主要功能是管理文章。 最近，在單擊某個按鈕時嘗試將客戶端重定向到不同的路由后，我遇到了一些奇怪的行為。

所以我在 reactstrap 的模式 window 中有一個按鈕定義

render() {
<Modal isOpen={this.state.modalOpen} toggle={this.toggleModal.bind(this)}
...
  <Button onClick={this.addNewArticle.bind(this)}>Add</Button>
...

它旨在觸發一個回調，該回調將 POST 輸入的文章數據，然后將客戶端重定向到顯示新創建的文章的頁面

addNewArticle() {
    fetch('/api/v1/article', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.state.articleData)
    })
    .then(response => response.json())
    .then(article => {
        // ...
        this.toggleModal();
        this.props.history.push(`/read/${article.id}`);
    });
}

toggleModal() {
    this.setState({
        modalOpen: !this.state.modalOpen,
    });
}

問題是，重定向完成后，我無法使用鼠標滾輪滾動文章（在 devtools 中調用window.scrollByLines(1)實際上有效）。 整個頁面只是固定在原地。 在我完全刷新整個頁面 (F5) 之后，一切似乎都恢復正常並且再次啟用滾動。 我嘗試用 render() this.props.history.push內返回的<Redirect />標記替換 this.props.history.push，但沒有幫助。

我怎樣才能防止那個奇怪的滾動鎖？

編輯：添加了有關模態 window 的詳細信息。
似乎toggleModal()沒有按預期工作，因為它在重定向后在 DOM 中留下以下 CSS class：

.modal-open {
    overflow: hidden;
}

Answer 1

事實證明這是 reactstrap 中的一個已知錯誤 - https://github.com/reactstrap/reactstrap/issues/1323

現在我已經修改了 addNewArticle 代碼以手動刪除有問題的元素並且問題消失了

...
.then(article => {
    ...
    this.toggleModal();
    document.querySelector('body').classList.remove('modal-open');
    this.props.history.push('/');
});