时间戳

首页 > 解决方案 > 如何在 browserHistory.push(path, [state]) 中传递状态

reactjs - 如何在 browserHistory.push(path, [state]) 中传递状态

问题描述

我正在开发一个使用 react-router 3.0.5 的项目，我正在尝试传递状态browserHistory.push并且路由发生变化，但状态不会传递到任何位置的道具。

我已经阅读了文档，但我可能会遗漏一些简单的东西。据我所知，这应该是发送状态没有问题。

async handleSubmit(e) {
    e.preventDefault();

      const email = this.email.value;
      const password = this.password.value;
      const passwordconfirm = this.passwordconfirm.value;
      const profile = {
        firstName: this.firstName.value,
        lastName: this.lastName.value,
        firstTime: !!this.firstTime.value,
        dueDate: date,
        couponCode,
        membership: { level: 'gold' },
      };

      Accounts.createUser({ email, password, profile }, (err) => {
        if (err) {
          return self.setError(err.message);
        }
        if (isGift) {
          claimGift.call({ code: couponCode }, () => {
            swal({
              title: 'Gift Claimed!',
              icon: 'success',
              button: 'Continue',
            }).then((confirm) => {
              if (confirm) return browserHistory.push('/payment', { level: 'gold' });
            });
          });
        } else return browserHistory.push('/payment', { level: 'gold' });
      });
    }
  }

包.json

{
  "name": "fakename",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "meteor --settings dev-settings.json"
  },
  "dependencies": {
    "autoprefixer": "^7.1.1",
    "babel-runtime": "^6.26.0",
    "bcrypt": "^1.0.3",
    "bluebird": "^3.5.1",
    "contentful": "^5.1.3",
    "marked": "^0.3.6",
    "meteor-node-stubs": "~0.2.4",
    "moment": "^2.21.0",
    "prop-types": "^15.6.0",
    "radium": "^0.19.6",
    "react": "^16.1.1",
    "react-async-script-loader": "^0.3.0",
    "react-burger-menu": "^2.1.11",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.1.1",
    "react-feather": "^1.0.7",
    "react-flatpickr": "^3.6.3",
    "react-router": "3.0.5",
    "react-stripe-elements": "^1.2.1",
    "react-tooltip": "^3.4.0",
    "reactable": "github:vladnicula/reactable",
    "sib-api-v3-sdk": "^3.1.6",
    "simpl-schema": "^0.3.2",
    "stripe": "^5.5.0",
    "sweetalert": "^2.0.8",
    "sweetalert2": "^7.1.2",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "@meteorjs/eslint-config-meteor": "^1.0.5",
    "babel-eslint": "^7.2.3",
    "eslint": "^4.4.1",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-import-resolver-meteor": "^0.4.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-meteor": "^4.0.1",
    "eslint-plugin-react": "^7.2.1"
  },
  "postcss": {
    "plugins": {
      "postcss-easy-import": {
        "extensions": [
          ".css",
          ".scss",
          ".import.css"
        ]
      },
      "autoprefixer": {
        "browsers": [
          "last 2 versions"
        ]
      }
    }
  },
  "eslintConfig": {
    "parser": "babel-eslint",
    "parserOptions": {
      "allowImportExportEverywhere": true,
      "allowAfterThis": true
    },
    "plugins": [
      "meteor"
    ],
    "extends": [
      "airbnb",
      "plugin:meteor/recommended"
    ],
    "settings": {
      "import/resolver": "meteor"
    },
    "rules": {
      "import/extensions": [
        "off",
        "never"
      ],
      "import/no-extraneous-dependencies": "off",
      "import/prefer-default-export": "off",
      "import/no-absolute-path": "off",
      "react/prefer-stateless-function": "off",
      "react/jsx-filename-extension": "off",
      "react/forbid-prop-types": "off",
      "react/require-default-props": "off",
      "no-underscore-dangle": "off",
      "jsx-a11y/no-static-element-interactions": "off",
      "class-methods-use-this": "off"
    }
  }
}

标签： reactjsreact-router

解决方案

React Router 允许我们通过browserHistory和传递状态Link。下面给出了示例代码片段。

browserHistory.push({pathname: '/navigationPath', state: {message: 'navigated'}})

在您的情况下，您尚未添加pathnameand statein browserHistoy。您的代码应如下所示

browserHistory.push({pathname: '/payment', state: {level: 'gold'}})

希望此解决方案对您有所帮助。

推荐阅读