React redux 如何使用 react-router 重定向到特定页面

IT技术 javascript reactjs react-router redux

2021-04-27 22:15:05

我在减速器中做了一些状态，它返回一个logged_in具有布尔值的值。

这是我的代码：

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'
import { connect } from 'react-redux'

export class NewStock extends React.Component {
  componentWillMount() {
    const { router, session } = this.props;
    if (session.userSessionData.get('logged_in') == false) {
      router.transitionTo('/login');
    }
  };

  render() {
    const { router, session } = this.props
    const currentRoute = router.location.pathname
    return (
      <div className="row">
        <h1>Hello World</h1>
      </div>
    )
  }
}

function select(state) {
  return {
    router: state.router,
    flash: state.flash.get('newStock'),
    newStock: state.newStock,
    session: state.session
  }
}

export default connect(select)(NewStock)

此组件在/new路径上

我想在每次访问此页面时检查，它会检查logged_in状态是否为true或false。如果false用户将被重定向到/login页面。

  componentWillMount() {
    const { router, session } = this.props;
    if (session.userSessionData.get('logged_in') == false) {
      router.transitionTo('/login');
    }
  };

但它返回一个错误，指出：

Uncaught TypeError: router.transitionTo is not a function

有人有同样的问题吗？提前致谢

2个回答

我相信你想使用pushState(null, '/login')而不是transitionTo。此外，我建议制作一个高阶组件，为您执行此类授权，这样您就不必componentDidMount每次都编写该逻辑。

这是我正在谈论的高阶授权组件的示例：https : //github.com/SpencerCDixon/Kira/blob/master/client/config/routes.js#L29-L60

编辑我刚刚意识到你没有使用 redux-router。但我建议将 redux-router 或 redux-simple-router 与 react router 结合使用

确保将历史上下文添加到您的组件中：

static contextTypes = {
  location: PropTypes.object,
  history: PropTypes.object
}

然后你可以这样做：

componentWillMount() {
  const { session } = this.props;
  if (!session.userSessionData.get('logged_in')) {
    this.context.history.pushState(null, '/login');
  }
};

react-router 2 的更新

在 react-router 2.0 中，您将改为添加路由器上下文：

static contextTypes = {
  router: PropTypes.object
}

然后你可以这样做：

componentWillMount() {
  const { session } = this.props;
  if (!session.userSessionData.get('logged_in')) {
    this.context.router.push({
      pathname: '/login'
    });
  }
};

其它你可能感兴趣的问题

上一篇Reactjs 如何在滚动时模糊背景图像？下一篇使用纯javascript获取元素的尺寸和位置