How to pass state in browserHistory.push(path, [state]) - reactjs

Question

I'm working on a project that uses react-router 3.0.5 and I'm attempting to pass state through browserHistory.push and the route changes but the state doesn't get passed through to props in any location.
I've read the documentation but I could be missing something simple. To my knowledge, this should be sending state without an issue.
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' });
});
}
}
package.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"
}
}
}

Answer 1

React Router allows us to pass state via browserHistory and Link. Example code snippet is given below.
browserHistory.push({pathname: '/navigationPath', state: {message: 'navigated'}})
In your case, you have not added pathname and state in browserHistoy. Your code should look like this
browserHistory.push({pathname: '/payment', state: {level: 'gold'}})
Hope this solution helps you.