无法在0.13.3和3.0.0之间进行转换（react-router）

Question

我希望在一个演示v0.x转换的在线教程中替换代码 - ＆gt; v3.x使用react-router。

该示例很简单，在客户端运行一个函数，确认用户是否真的想从当前页面转换到请求的页面/路由（示例中的aboutPage）。这在使用本教程中提供的代码时工作正常，但我尝试将其从教程（使用react-router v0.x）转换为react-router 3.0.0的稳定版本。

我查看了作为react-router文档的一部分提供的升级指南，但遗憾的是无法模仿相同的行为。好消息是我已经接近 - aboutPage将被渲染，或者不渲染，这取决于用户选择[OK]，或者在提示时选择[Cancel]。问题在于，使用我编写的代码，当用户选择不查看页面时，它不会被呈现，但是URL仍然会改变（即http://server/aboutPage），即使aboutPage不是＆＃39;渲染。如果用户选择取消，我该如何获取URL以使URL保持不变？

...示例

aboutPage.js

版本0.13.3

var React = require ('react');
var About = React.createClass({
    statics: {
        willTransitionTo: function(transition, params, query, callback) {
            if (!confirm("Are you sure you really want to make a transition to the about page?!")) {
                transition.about();
            } else {
                callback();
            }
        }
    },
    render: function() {

        return (
            <div>
                <h1>About</h1>
            </div>
        );
    }
});
module.exports = About;

版本3.0.0

var React = require ('react');
var About = React.createClass({
    render: function() {
        return (
            <div>
                <h1>About</h1>
            </div>
        );
    }
});
module.exports = About;

main.js

版本0.13.3

var React = require('react');

var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;
var NotFoundRoute = Router.NotFoundRoute;
var Redirect = Router.Redirect;

var routes = (
<Route name="app" path="/" handler={require('./app')}>
    <DefaultRoute handler={require('./homePage')} />
    <Route name="about" handler={require('./aboutPage')} />
</Route>
);
module.exports = routes;

版本3.0.0

$ = jQuery = require("jquery");

var React = require('react')
var ReactDOM = require('react-dom')

var Router = require('react-router').Router;
var Route = require('react-router').Route;
var hashHistory = require('react-router').hashHistory
var IndexRoute = require('react-router').IndexRoute;
var IndexLink = require('react-router').IndexLink;
var Link = require('react-router').Link;

var App = React.createClass({
    render: function() {
        return(
            <div>
                <div className="myContent" className="container-fluid">
                    {this.props.children}
                </div>
            </div>
        )
    }
});


const checkUserIsSure = (nextState, replace, callback) => {
    (nextState, replace, callback) => { 
        console.log("main/reactdom.render/route-about: entering");
        if (!confirm("Are you sure you want to view a page this boring?")) {
            console.log("you don't want to visit a boring page");
            callback("error message from callback damien")
        } else {
            console.log("you do want to visit a boring page");
            callback();
        }
        console.log("main/checkUserIsSure: leaving...");
}

ReactDOM.render((
    <Router history={hashHistory}>
        <Route path="/" component={App} >
            <IndexRoute component={require('./homePage')} />
            <Route path="about" component={require('./components/about/aboutPage')} onEnter={checkUserIsSure}/>
        </Route>
    </Router>
), document.getElementById('app'));

Answer 1

在v3中，您可以使用setRouteLeaveHook提供的context.router为组件设置离开钩子（您也可以通过使用withRouter高阶组件包装组件来访问该组件）。 confirming navigation文档中有一个示例。

var React = require('react');
var ReactRouter = require('react-router');
var withRouter = ReactRouter.withRouter;
var Link = ReactRouter.Link;

var HomePage = withRouter(React.createClass({
  componentDidMount: function() {
    this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave);
  },

  routerWillLeave: function() {
    return 'Leaving me already?';
  },

  render: function() {
    return (
      <div>
        <h1>Home Page</h1>
        <Link to='/about'>About</Link>
      </div>
    );
  }
}));