React Router确认导航到页面

保罗·斯通纳

我正在努力学习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版本中,以上内容不再起作用。因此,按照在react router文档页面上找到的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'));

我遇到的问题是,当我尝试导航到“关于”页面时,onEnter不会触发。

我确定我想念一些东西。我可能做错了什么?

保罗·斯通纳

好的。我...不聪明。我发现我将onEnter放置在错误的路线上。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

react-router browserHistory.push无法导航到新页面

来自分类Dev

如何使用带有typescript的react router dom导航到新页面

来自分类Dev

使用React Router导航到页面时useEffect根本不运行

来自分类Dev

React-Router:导航到新页面后如何调整标题大小?

来自分类Dev

react-router-dom链接无法导航到目标页面的开始

来自分类Dev

在React Native中导航到错误的页面

来自分类Dev

React Props不会将信息传递到确认页面

来自分类Dev

React Native Router Flux:从主场景导航到子场景

来自分类Dev

React Router:单击映射的项目到新页面

来自分类Dev

React Router和导航按钮

来自分类Dev

React Router导航栏示例

来自分类Dev

React Router动态导航面板

来自分类Dev

持久导航 React-Router

来自分类Dev

第一次导航后,React Router不会渲染推送的页面

来自分类Dev

通过导航重定向后,React Router不会加载新的页面组件

来自分类Dev

React Router V4:如何以编程方式导航到上次访问的页面

来自分类Dev

在react-router 4中单击导航链接后如何加载页面

来自分类Dev

使用React Router重定向到仅显示组件/页面内容的页面

来自分类Dev

react-router - 将私人页面重定向到登录页面不起作用

来自分类Dev

React Router-导航到相同的路由会导致重新渲染

来自分类Dev

如何使用 React Router 4 单击按钮并导航到带有 URL 参数的新路由

来自分类Dev

React js使用变量导航到另一个页面

来自分类Dev

如何在 React Native 中不使用堆栈导航器重定向到页面?

来自分类Dev

在 Gatsby / React 中,导航到页面时无法滚动它,直到重新加载(在移动设备上)

来自分类Dev

使用react-router的React页面布局

来自分类Dev

在react-router 2中以编程方式重定向到页面

来自分类常见问题

React Router-在验证时重定向到另一个页面

来自分类Dev

React Router-将api数据传递到链接的组件以打开新页面

来自分类Dev

如何使用React Router将信息传递到新页面?

Related 相关文章

  1. 1

    react-router browserHistory.push无法导航到新页面

  2. 2

    如何使用带有typescript的react router dom导航到新页面

  3. 3

    使用React Router导航到页面时useEffect根本不运行

  4. 4

    React-Router:导航到新页面后如何调整标题大小?

  5. 5

    react-router-dom链接无法导航到目标页面的开始

  6. 6

    在React Native中导航到错误的页面

  7. 7

    React Props不会将信息传递到确认页面

  8. 8

    React Native Router Flux:从主场景导航到子场景

  9. 9

    React Router:单击映射的项目到新页面

  10. 10

    React Router和导航按钮

  11. 11

    React Router导航栏示例

  12. 12

    React Router动态导航面板

  13. 13

    持久导航 React-Router

  14. 14

    第一次导航后,React Router不会渲染推送的页面

  15. 15

    通过导航重定向后,React Router不会加载新的页面组件

  16. 16

    React Router V4:如何以编程方式导航到上次访问的页面

  17. 17

    在react-router 4中单击导航链接后如何加载页面

  18. 18

    使用React Router重定向到仅显示组件/页面内容的页面

  19. 19

    react-router - 将私人页面重定向到登录页面不起作用

  20. 20

    React Router-导航到相同的路由会导致重新渲染

  21. 21

    如何使用 React Router 4 单击按钮并导航到带有 URL 参数的新路由

  22. 22

    React js使用变量导航到另一个页面

  23. 23

    如何在 React Native 中不使用堆栈导航器重定向到页面?

  24. 24

    在 Gatsby / React 中,导航到页面时无法滚动它,直到重新加载(在移动设备上)

  25. 25

    使用react-router的React页面布局

  26. 26

    在react-router 2中以编程方式重定向到页面

  27. 27

    React Router-在验证时重定向到另一个页面

  28. 28

    React Router-将api数据传递到链接的组件以打开新页面

  29. 29

    如何使用React Router将信息传递到新页面?

热门标签

归档