Question

我正在努力学习React。该示例项目旨在与React 0.13.3和react-router 0.13.3一起使用。我正在使用react 15.4.1和react-router 3.0.0

示例项目使用willTransitionTo在允许用户导航到页面之前进行简单的确认。这是代码：

var About = React.createClass({
  statics: {
    willTransitionTo: function(transition, params, query, callback) {
      if (!confirm('Are you sure you want to read a page that\'s this boring?')) {
        transition.about();
      } else {
        callback();
      }
}, ...

我知道在我使用的react-router版本中，上面的内容不再适用。因此，在发现了on the react router docs page的auth-flow示例之后，我将代码转换为使用onEnter约定。这是我到目前为止：

function confirmTransition(nextState, replace){
    if(comfirm('Are you sure you want to read a page that\'s this boring?')){
        replace({
            pathname: '/about',
            state: {nextPathname: nextState.location.pathname}
        });
    }
}

ReactDOM.render((
    <Router history={hashHistory}>
        <Route path="/" component={require('./components/app')}>
            <IndexRoute component={require('./components/homePage')} />
            <Route path="/authors" component={require('./components/authors/authorPage')} />
            <Route path="/about" component={require('./components/about/aboutPage')} />
            <Redirect from="about-us" to="about" />
            <Route path='*' component={require('./components/notFoundPage')} onEnter={confirmTransition}/>
        </Route>
    </Router>
), document.getElementById('app'));

我遇到的问题是当我尝试导航到about页面时，onEnter不会触发。

我确定我错过了一些东西。我可能做错了什么？

Answer 1

确定。我......不聪明。我发现我把onEnter放在了错误的路线上。

谢谢大家没有指出这一点。

反应路由器确认导航到页面

1 个答案: