React-Router getUserConfirmation 功能问题答案

【问题标题】：React-Router getUserConfirmation functionality issueReact-Router getUserConfirmation 功能问题
【发布时间】：2018-07-24 19:32:43
【问题描述】：

当用户单击浏览器后退按钮时，我正在尝试观察 React Router 的状态变化。我的应用程序集成了一个 redux Provider 和 Material-UI。但是我无法让getUserConfirmation 工作。

请在下面找到我的代码 sn-p。

 const getConfirmation = (message, callback) => {
      const allowTransition = window.confirm(message)
      strong textcallback(allowTransition)
    }
    const myHistory = createBrowserHistory();

    ReactDOM.render(
      <Provider store={store} >
        <MuiThemeProvider>
           <BrowserRouter basename="/app" history={myHistory} getUserConfirmation={getConfirmation} >
              <App />
           </BrowserRouter>
        </MuiThemeProvider>
      </Provider>, document.getElementById('root'));

使用的库版本：

React v16
react-router-dom v4.2.2
react-redux v5.0.6
material-ui v0.20.0
redux v3.7.2

我提到的一些文档：

https://reacttraining.com/react-router/web/api/BrowserRouter
https://codepen.io/pshrmn/pen/MpOpEY
https://codepen.io/anon/pen/gRXzMg?editors=0010

感谢您的帮助，谢谢 ????

【问题讨论】：

标签： reactjs react-router react-redux material-ui react-router-dom

【解决方案1】：

Emm.. 也许你也需要组件，这是我的演示希望这有用。

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Prompt } from 'react-router-dom';
import { Row, Col, Modal } from 'antd';
import { Home, About, Topics } from './components';


const getConfirm = (content, callback) => {
    Modal.confirm({
        title: 'confirm',
        content,
        onOk: () => {
            callback(true);
        },
        onCancel: () => {
            callback(false);
        }
    });
};
class App extends Component {
    render() {
        return (
            <Router getUserConfirmation={getConfirm}>
                <div className="App">
                    <Prompt message="Are you sure you want to leave?" />
                    <Row>
                        <Col>
                            <Link to="/">Home</Link>
                        </Col>
                        <Col>
                            <Link to="/about">About</Link>
                        </Col>
                        <Col>
                            <Link to="/topics">Topics</Link>
                        </Col>
                        <Col>
                            <Link to="/with-state">withState</Link>
                        </Col>
                    </Row>
                    <Route path="/" exact component={Home} />
                    <Route path="about" component={About} />
                    <Route path="/topics" component={Topics} />
                </div>
            </Router>
        );
    }
}

export default App;

【讨论】：