context.router.transitionTo function in reactjs not working

Question

Consider the following code:

import React from 'react';

class TestForm extends React.Component {

    constructor(props) {
        super(props);
    }

    _submitTest(e) {
        e.preventDefault();
        this.context.router.transitionTo('/test-next-page', {param_test: 'Test Data'});
    }

    render() {
        return (
            <div className="post-content row">
                <form className="test-form" method="post" onSubmit={this._submitTest.bind(this)}>
                    <input type="submit" value="Submit" className="btn btn-primary btn-lg"/>
                </form>
            </div>
        );

    }
}

TestForm.contextTypes = {
    router: React.PropTypes.object
}

export default TestForm;

the this.context.router.transitionTo() line in the _submitTest() function send me to the test-next-page page/component but i am not seeing the param value in the component!

Am I doing anything wrong in the second parameter of this.context.router.transitionTo()?

Check this https://stackoverflow.com/questions/44127739/programmatically-navigate-using-react-router/44128108#44128108 and https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-in-react-router-v4/45263164#45263164 — Shubham Khatri, Jan 11 '18 at 18:52
test-next-page is another component which is mapped by BrowserRouter. I need to pass json data from the form to that component on submit the form ... — Shah Alom, Jan 11 '18 at 18:55
@ChaseDeAnda Yes. Here is dependencies on my packages.json ... "dependencies": { "classnames": "^2.2.5", "history": "4.2.0", "paginator": "^1.0.0", "prop-types": "^15.6.0", "re-base": "2.2.0", "react": "15.3.2", "react-addons-css-transition-group": "15.3.2", "react-dom": "15.3.2", "react-router": "4.0.0-alpha.4", "react-router-dom": "^4.2.2" } — Shah Alom, Jan 11 '18 at 19:18

score 0 · Answer 1 · answered Jan 12 '18 at 18:51

After tried different way, I found a solution. I have updated the function this way:

_submitTest(e) {
    e.preventDefault();

    const my_json_obj = {param_test: 'Test Data'};

    this.context.router.transitionTo({
        pathname: '/test-next-page',
        state: my_json_obj
    });
}

Once I moved to the corresponding component of test-next-page path, I found the data in the props. Just like this:

class TestNextPage extends React.Component {
    constructor (props) {
        super(props);
    }

    async componentWillMount() {
        console.log(this.props); // Here I found the data in state under location object
    }
}

context.router.transitionTo function in reactjs not working

1 Answers1