Question

我有一个react应用，我正在使用history包来处理浏览器历史记录，例如将新的url /状态推送到历史记录或监听历史记录更改事件。我的问题是我取消了componentWillUnmount中的历史记录更改事件，以便当组件消失时，历史记录更改事件也将被删除。但是，历史记录更改总是在componentWillUnmout发生之前发生，因此我总是收到一条错误消息：“未安装组件上的setState无法...”。有人在这里有解决方案吗？

// browser_history.js
import History from 'history/createBrowserHistory';

const history = History();
export default history;

// index.js
import { Router } from 'react-router-dom';
import history from 'browser_history'; 
import App from 'app';

ReactDOM.render(
    <Router history={history}>
        <App />
    </Router>,
    document.getElementById('root')
);

// app.js
class App extends React.Component{
    constructor(props) {
        super(props);
    }

    render() {
        return(<Switch>
                   <Route path='/dashboard/' component={dashboard}
                   ...
                   ...
               </Switch>);
    }
}

// dashboard.js
import history from 'browser_history'; 

class Table extends React.Component{
    constructor(props) {
        super(props);
        this.unlisten_history = history .listen(this.onHistoryChange);
    }

    componentDidMount() {
        this.unlisten_history = history .listen(this.onHistoryChange);
    }

    onHistoryChange() {
        this.setState({...})
    }
}

Answer 1

找到解决方案。

不要将<Route history={history}>与自定义历史记录对象一起使用，而是使用<BrowserRouter>并用export default withRouter(xxx)包装组件，这样包装的组件将具有this.props.history，我可以使用它可以将新状态推送到浏览器历史记录，并且该历史记录对象始终与任何反应路由操作同步。

React无法取消监听历史更改

1 个答案: